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