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>

javascript

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

result

svgコードを記述した後

• 線を描くアニメーションの原理は、dashoffsetをパスの長さと同じに設定し、0に減らすことです.
  
  stroke-dashoffset:画像がどこから始まるかを示すプロパティ
  
  stroke-dasharray:破線(dash)の長さを表す値
  
  Fill:塗りつぶし領域の色(none設定時に塗りつぶさない)
  
  stroke-width:一定の幅値
を維持(領域全体のサイズを考慮しない)

**現在のコードはhtmlにwidth、stroke、fillが含まれているため、cssは追加されていません.