SVG路徑描邊動畫效果

一、效果

簡而言之，就是讓SVG的描邊像是有人繪製一樣的動畫效果。

三、必知的基礎知識

SVG中有個比較重要的屬性分支，stroke ：“描邊”。

1，stroke 描邊顏色

     none沒有顏色    

   <color> 就是我們常規的顏色值。RGBA, HSBA都支援。red,green,#000,#ccc等

currentColor略高深，可理解為：共用父級但不越過SVG元素的XML中color(style中的)值；可以讓路徑繪製的文字直接繼承父標籤的color顏色值。
2， stroke-width  描邊的粗細。stroke-width:2px;
3，  stroke-linecap   描邊端點表現方式，可用值有：butt, round, square, inherit


4，stroke-linejoin  描邊轉角的表現方式。可用值有：miter, round, bevel, inherit


5，stroke-miterlimit 描邊相交（銳角）的表現方式。預設大小是4. 什麼斜角轉斜面的角度損耗之類的意思，值越大，損耗越小。具體幹嘛的，大家可查查其他資料。
6，stroke-dasharray 虛線描邊。可選值為：none, <dasharray>, inherit
none表示不是虛線；
<dasharray>為一個逗號或空格分隔的數值列表。表示各個虛線端的長度。可以是固定的長度值，也可以是百分比值
inherit表繼承
7，stroke-dashoffset 虛線的起始位移。可選值為：<percentage>, <length>, inherit. 百分比值，長度值，繼承
8，stroke-opacity 表示描邊透明度。預設是1.
而與本文相關的動畫效果相關的就是stroke-dasharray和stroke-dashoffset。

三、stroke-dasharray和stroke-dashoffset
stroke-dasharray虛線設定可以是一個值也可以是一個數組，具體表現如下：

<svg>    <g>        <!--stroke-dasharray: 20;從左往右依次 虛線長度和間距為20-->        <path d="M10,20 L300,20" style="stroke-dasharray: 20;stroke: green;"></path>        <!--stroke-dasharray: 20,10;從左往右依次 虛線長度20，間距10-->        <path d="M10,50 L300,50" style="stroke-dasharray: 20,10;stroke:green;"></path>        <!--stroke-dasharray: 20,5,5,10;從左往右依次 第一條虛線長度20，第一個間距5，第二條虛線長度5，第二條間距10-->        <path d="M10,80 L300,80" style="stroke-dasharray: 20,5,5,10;stroke: green;"></path>    </g></svg>

stroke-dashoffset 虛線向左位移（當虛線值較小，不斷位移不斷有虛線顯示）

<svg>    <g>        <!--stroke-dashoffset: 0-->        <path d="M10,20 L300,20" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:0"></path>        <!--stroke-dashoffset: 20 虛線向左位移20，第一條虛線剛好只顯示一半-->        <path d="M10,50 L300,50" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:20"></path>        <!--stroke-dashoffset: 40  虛線向左位移40，第一條虛線剛好只全部被遮住-->        <path d="M10,80 L300,80" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:40"></path>        <path d="M10,110 L300,110" style="stroke:green;stroke-dasharray:40;stroke-dashoffset:70"></path>    </g></svg>

一個特殊情況
我們現在都試想一下，如果stroke-dasharray和stroke-dashoffset值都很大，超過了描邊路徑的總長度，會怎麼樣。

用中文解釋就是，一根火腿腸12厘米，要在上面畫虛線，虛線間隔有15厘米，如果沒有dashoffset，則火腿腸前面15厘米會被辣椒醬覆蓋。實際上只有12厘米，因此，我們看到的是整個火腿腸都有辣椒醬。現在，dashoffset也是15厘米，也就是虛線要往後位移15厘米，結果，辣椒醬要抹在火腿腸之外，也就是火腿腸上什麼辣椒醬也沒有。如果換成上面的直線SVG，也就是直線看不見了。我們把dashoffset值逐漸層小，則會發現，火腿腸上的辣椒醬一點一點出現了，好像辣椒醬從火腿腸根部塗抹上去一樣。 四、CSS3 animation的支援

內聯SVG的強大之處在於，其本身也是個HTML元素，能被CSS屬性控制，處理傳統的高寬定位、邊框背景色等，SVG自身的一些特殊屬性也能被CSS支援，甚至在CSS3 animation動畫中。

於是，我們上面探討的SVG描邊動畫效果能夠便於使用CSS3 animation實現，無需任何JavaScript，這就是一開始Demo頁面的實現。

其CSS代碼重點：

path {  stroke-dasharray: 1000;  stroke-dashoffset: 1000;  animation: dash 5s linear infinite;}@keyframes dash {  to {    stroke-dashoffset: 0;  }}

1000沒有什麼特殊含義，只是足夠大，保證比比每個路徑的長度大即可，你也可以是1500，區別就是描邊速度更快一點。

屬性CSS3 animation的小夥伴應該一看就看出上面代碼的含義的，5秒動畫，stroke-dashoffset從1000到0. 描邊動畫形成。

以上CSS代碼幾乎可以通用。無論你的SVG路徑多麼複雜，都能以描邊動畫形式呈現。根據自己的測試，IE10+下沒有動畫效果，不

是CSS不支援SVG的stroke相關屬性，而是animation中不支援stroke相關屬性的動畫。

以上效果有什麼用的，我試想了以下一些情境：示範時候分步展示一些要點；或者圖片等hover描邊效果；或者網站tip注意項的箭頭引導提示效果等，都很有用。技術+你腦中不斷的創意，才有精彩紛呈的創新體驗。 五、路徑的長度

如果您想知道路徑，或線條的準確長度。可能需要藉助JavaScript，類似下面的代碼：

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

六、炒個板栗

<svg  x="0px" y="0px" width="340px" height="333px" xmlns="http://www.w3.org/2000/svg"  >  <path id="path" fill="#FFFFFF" stroke=