SVG Animate: stroke-dashoffset, SVG Gradient

 

안녕하세요 찐망고입니다.

오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요

 

SVG애니메이션의 핵심은 stroke-dashoffset인데요.

stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성 중 하나로,

stroke-dasharray와 함께 사용되며 경로를 따라 선을 그릴 때의 시작지점을 조정하는 역할을 합니다.

 

stroke-dasharray는 선을 일정한 패턴의 대시와 공백으로 나누는 속성인데,

<svg width="200" height="100">
  <line x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="5, 10" />
</svg>

 

위와 같은 코드인 경우 설정된 선의 5px만큼 그 뒤로 10px만큼의 공백을 반복하는 형태를 뜻합니다.

 

stroke-dashoffset은 기본적으로 0으로 설정되어 있으며,

을 증가시키면 대시패턴이 이동하여 경로를 따라 선이 그려지는 위치가 변경됩니다.

 

JS를 이용하면 SVG의 stroke-dashoffset 값과 함께 패스의 전체 길이를 알 수도 있는데

이 작업은 getTotalLength() 메서드를 사용하면 쉽게 가능합니다.

<svg width="200" height="100">
  <line id="myLine" x1="10" y1="50" x2="190" y2="50" stroke="black" stroke-width="4" stroke-dasharray="5, 10" />
</svg>

<script>
  const line = document.getElementById('myLine');
  
  // 선의 총 길이를 가져오기
  const totalLength = line.getTotalLength();
  
  // stroke-dashoffset 값을 설정 (선의 총 길이와 동일하게 설정)
  line.style.strokeDashoffset = totalLength;
  
  // 결과 출력
  console.log('총 길이:', totalLength);
  console.log('현재 stroke-dashoffset 값:', line.style.strokeDashoffset);
</script>

 

 

그럼 애니메이션을 줘볼까요? 

해당 예시 사이트 이미지를 캡처해 봤습니다.

 

스크롤 이동 후 각 svg이미지들이 완성되는 부분인데요.

svg애니메이션

 

 

 

svg애니메이션 코드

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 선 -->
  <line x1="50" y1="100" x2="350" y2="100" stroke="blue" stroke-width="5"
        stroke-dasharray="300" stroke-dashoffset="300">
    <!-- 선이 점차 나타나는 애니메이션 -->
    <animate attributeName="stroke-dashoffset" from="300" to="0" dur="3s" fill="freeze" />
  </line>
</svg>

 

이 코드는 파란색 선이 3초 동안 선이 점점 그려지는 애니메이션 효과를 나타냅니다.

처음 선은 stroke-dashoffset = "300" 값으로 인해 300픽셀만큼의 선이 숨겨져 보이지 않게 시작하고,

300에서 0으로 3초동안 줄어들며, 선이 점점 화면에 나타납니다.

애니메이션이 끝나면 선은 완전히 그려진 상태가 되고, fill="freeze"로 인해 이 상태가 유지됩니다.

 

 

SVG에 그라디언트를 추가할 수도 있습니다.

<svg viewBox="0 0 51 72" fill="none" xmlns="http://www.w3.org/2000/svg" id="svgani1" width="200" height="300">
  <path d="M15 69.9443V48.3227L37.4457 34.2146V69.9443L50 63.1335V29.566L25.462 9.94434V69.9443" 
        stroke="url(#paint0_linear_1684_53329)" stroke-width="2" 
        stroke-dasharray="300" stroke-dashoffset="300">
    <!-- 애니메이션 추가 -->
    <animate attributeName="stroke-dashoffset" from="300" to="0" dur="3s" fill="freeze" />
  </path>
  
  <defs>
    <linearGradient id="paint0_linear_1684_53329" x1="11.925" y1="9.94433" x2="63.8506" y2="77.6905" gradientUnits="userSpaceOnUse">
      <stop stop-color="#F27604"></stop>
      <stop offset="0.463542" stop-color="#F08200"></stop>
      <stop offset="1" stop-color="#FFB053"></stop>
    </linearGradient>
  </defs>
</svg>

 

 

 

See the Pen svg애니메이션 by 찐망고 (@nnwbliyz-the-styleful) on CodePen.

 

 

 

추가글도 참고해주세요~

js)스크롤 이벤트 + SVG <animate>

 

 

 

 

출처사이트 

 - https://www.sunjin.co.kr/