SVG描邊動畫原理

SVG描邊動畫原理其實很簡單，主要利用如下兩個屬性

stroke-dasharray 製做虛線，使得黑白相間，

stroke-dashoffset 使得虛線向開頭偏移，這裏的1500不精確，是我隨便取的，下文介紹經過JS獲取長度。

動畫就是減小虛線偏移，那麼實線就會慢慢漏出來了

 

JS獲取長度

　　var path = document.querySelector('path');

　　var length = path.getTotalLength();

　　而後改變path.style.strokeDasharray 和 path.style.strokeDashoffset爲獲取的長度便可。