通常我們說的 Web 動畫，包含了三大類。
CSS3動畫javascript動畫（canvas）html動畫（SVG）
個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取舍，本文討論的是我認為 SVG 中在實際項目中非常有應用價值 SVG 線條動畫。
舉個栗子
SVG 線條動畫，在一些特定的場合下可以解決使用 CSS 無法完成的動畫。尤其是在進度條方面，看看最近項目里的一個小需求，一個這種形狀的進度條：
把里面的進度條單獨拿出來，也就是需要實現這樣一個效果：
腦洞大開一下，使用 CSS3 如何實現這樣一個進度條呢。
CSS3 是可以做到的，就是很麻煩。但是如果采用 SVG 的話，迎刃而解。
我們假定你在閱讀本文的時候有了一定的 SVG 基礎，上面代碼看看就懂了，好了，本文到此結束。
好吧，還是一步一步解釋，上面進度條的主要 SVG 代碼如下：
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
<polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>
SVG 為何
可縮放矢量圖形，即SVG，是W3C XML的分枝語言之一，用於標記可縮放的矢量圖形。（摘自MDN）
上面代碼中，先談談 svg 標簽：
version： 表示<svg>的版本，目前只有 1.0，1.1 兩種xmlns：http://www.w3.org/2000/svg固定值xmlns:xlink：http://www.w3.org/1999/xlink固定值xml:space：preserve固定值，上述三個值固定，表示命名空間，當數據單獨存在svg文件內時，這3個值不能省略class：就是我們熟悉的 classwidth|height： 定義svg畫布的大小viewbox： 定義了畫布上可以顯示的區域，當 viewBox 的大小和 svg 不同時，viewBox 在屏幕上的顯示會縮放至 svg 同等大小（暫時可以不用理解）
有了 svg 標簽，我們就可以愉快的在內部添加 SVG 圖形了，上面，我在 svg 中定義了兩個 polyline 標簽。
SVG 基本形狀
polyline：是SVG的一個基本形狀，用來創建一系列直線連接多個點。
其實，polyline 是一個比較不常用的形狀，比較常用的是path，rect，circle 等。這里我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 屬性，在線段連接處創建圓滑過渡角。
SVG 中定義了一些基本形狀，在繼續下文之前，建議點進去先了解一些基本圖形的標簽及寫法：
SVG 線條動畫
好，終於到本文的重點了。
上面，我們給兩個 polyline 都設置了 class，SVG 圖形的一個好處就是部分屬性樣式可以使用 CSS 的方式書寫，更重要的是可以配合 CSS 動畫一起使用。
上面，主要的 CSS 代碼：
.g-rect-path{
fill: none;
stroke-width:10;
stroke:#d3dce6;
stroke-linejoin:round;
stroke-linecap:round;
}
.g-rect-fill{
fill: none;
stroke-width:10;
stroke:#ff7700;
stroke-linejoin:round;
stroke-linecap:round;
stroke-dasharray: 0, 1370;
stroke-dashoffset: 0;
animation: lineMove 2s ease-out infinite;
}
@keyframes lineMove {
0%{
stroke-dasharray: 0, 1350;
}
100%{
stroke-dasharray: 1350, 1350;
}
}
這尼瑪是什么 CSS？怎么除了 animation 全都不認識？ 
莫慌，其實很多和 CSS 對比一下非常好理解，只是換了個名字：
fill：類比 css 中的background-color，給svg圖形填充顏色；stroke-width：類比 css 中的border-width，給svg圖形設定邊框寬度；stroke：類比 css 中的border-color，給svg圖形設定邊框顏色；stroke-linejoin|stroke-linecap：上文稍微提到過，設定線段連接處的樣式；stroke-dasharray：值是一組數組，沒數量上限，每個數字交替表示划線與間隔的寬度；stroke-dashoffset：則是虛線的偏移量
重點講講能夠實現線條動畫的關鍵屬性 stroke-dasharray 。
屬性 stroke-dasharray 可控制用來描邊的點划線的圖案范式。
它是一個<length>和<percentage>數列，數與數之間用逗號或者空白隔開，指定短划線和缺口的長度。如果提供了奇數個值，則這個值的數列重復一次，從而變成偶數個值。因此，5,3,2等同於5,3,2,5,3,2。
解釋很蒼白，直接看例子：
上面，填充進度條，使用了下面這個動畫 ：
@keyframes lineMove {
0%{
stroke-dasharray: 0, 1350;
}
100%{
stroke-dasharray: 1350, 1350;
}
}
stroke-dasharray: 0, 1350;，表示線框短划線和缺口的長度分別為 0 和 1350，所以一開始整個圖形都是被缺口占據，所以在視覺效果上長度為 0。
然后過渡到 stroke-dasharray: 1350, 1350，表示線框短划線和缺口的長度分別為 1350 和 1350，因為整個圖形的長度就是 1350，所以整個進度條會被慢慢填充滿。
掌握了這個技巧后，就可以使用 stroke-dasharray 和 stroke-dashoffset 制作很多不錯的交互場景：
SVG 線條動畫實現按鈕交互
SVG 線條動畫實現圓形進度條
多 SVG 圖形線條動畫配合
之前我司一個 h5 里面應用過的，多SVG 圖形線條動畫配合，可以制作一些比較酷炫的動畫，很有科技感。
正文結束，我在我的 Github 上，使用 SVG 實現了一些圖形 -- SVG奇思妙想，Demo可以戳這里。
下篇文章將會詳述非規則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，放個 Demo，敬請期待。
（12.28更新，下篇文章已出：【Web動畫】SVG 實現復雜線條動畫）
到此本文結束，如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。