SVG를 이용한 line-chart animation 만들기

SVG를 이용한 line-chart animation 만들기

• svg를 이용하기 전에 어떻게 활용하는지 잘 몰라서 무작정 겁을 먹고 어려울 것이라고 생각했다. 그런데 실제로 예제를 만들다 보니 생각보다 쉽게 원하는 동작이 구현되었다.

CSS

.line {
     stroke-dasharray: 1100; 
     stroke-dashoffset: 0;
     animation: dash 3s linear alternate;
  	}

 @keyframes dash {
   0% { stroke-dashoffset: 1100; }
   100% { stroke-dashoffset: 0; }
 }

html(svg)

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="visual" viewBox="0 0 900 600" width="900" height="600" version="1.1" style="border: 1px solid #000;"><rect x="0" y="0" width="900" height="600" fill="#fff"/>
  <path class="line" d="M0 482L25 500C50 518 100 554 150 519.7C200 485.3 250 380.7 300 371.2C350 361.7 400 447.3 450 466.7C500 486 550 439 600 436.2C650 433.3 700 474.7 750 457.2C800 439.7 850 363.3 875 325.2L900 287" fill="none" stroke-linecap="round" stroke-linejoin="miter" stroke="#0066FF" stroke-width="18"/>
</svg>

• svg 코드는 https://app.haikei.app/ 이용하여 만들었다.

javascript

<script type="text/javascript">
   path = document.querySelector('path').getTotalLength(); 
   console.log(path);
   //path의 길이를 console에서 확인
   //실행하면 1103.0550537109375 의 길이를 확인할 수 있다
</script>

result

svg 코드 작성 후

• 라인을 그리기 위한 애니메이션은 dashoffset을 path 길이와 똑같이 설정한 다음 0으로 줄이는 원리였다.
  stroke-dashoffset : 그림이 어떤 지점에서 시작할지 나타내는 속성
  stroke-dasharray : 점선(dash)의 길이를 나타내는 값
  fill : 영역을 칠하는 데 사용되는 색상 (none 설정 시 채워지지 않는다)
  stroke-width : 전체 영역의 크기에 관계없이 일정한 width 값 유지

** 현재 코드는 html 안에 width, stroke(color), fill 등이 포함되어 있어 별도로 css를 추가하지 않았다.