通常我們說的 web 動畫，包含了三大類。
個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 svg 中在實際專案中非常有應用價值 svg 線條動畫。
svg 線條動畫，在一些特定的場合下可以解決使用 css 無法完成的動畫。尤其是在進度條方面，看看最近專案裡的乙個小需求，乙個這種形狀的進度條：
把裡面的進度條單獨拿出來，也就是需要實現這樣乙個效果：
腦洞大開一下，使用 css3 如何實現這樣乙個進度條呢。
css3 是可以做到的，就是很麻煩。但是如果採用 svg 的話，迎刃而解。
我們假定你在閱讀本文的時候有了一定的 svg 基礎，上面**看看就懂了，好了，本文到此結束。
好吧，還是一步一步解釋，上面進度條的主要 svg **如下： 1
2
3
4
<svgversion="1.1" xmlns="" xmlns:xlink="" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
<polylinepoints="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
<polylinepoints="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
可縮放向量圖形，即svg，是w3c xml的分枝語言之一，用於標記可縮放的向量圖形。（摘自mdn）
上面**中，先談談svg標籤：
有了svg標籤，我們就可以愉快的在內部新增svg圖形了，上面，我在svg中定義了兩個polyline標籤。
polyline：是svg的乙個基本形狀，用來建立一系列直線連線多個點。
其實，polyline是乙個比較不常用的形狀，比較常用的是path，rect，circle等。這裡我使用polyline的原因是需要使用stroke-linejoin和stroke-linecap
svg 中定義了一些基本形狀，在繼續下文之前，建議點進去先了解一些基本圖形的標籤及寫法：
好，終於到本文的重點了。
上面，我們給兩個polyline都設定了 class，svg 圖形的乙個好處就是部分屬性樣式可以使用 css 的方式書寫，更重要的是可以配合 css 動畫一起使用。
上面，主要的 css **： 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.g-rect-path
.g-rect-fill
@keyframes linemove
100%
}
這尼瑪是什麼 css？怎麼除了animation全都不認識？
莫慌，其實很多和 css 對比一下非常好理解，只是換了個名字：
重點講講能夠實現線條動畫的關鍵屬性stroke-dasharray。
屬性 stroke-dasharray 可控制用來描邊的點劃線的圖案正規化。
它是乙個和數列，數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。如果提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。因此，5,3,2等同於5,3,2,5,3,2。
解釋很蒼白，直接看例子：
上面，填充進度條，使用了下面這個動畫 ： 1
2
3
4
5
6
7
8
@keyframes linemove
100%
}
stroke-dasharray: 0, 1350;，表示線框短劃線和缺口的長度分別為 0 和 1350，所以一開始整個圖形都是被缺口佔據，所以在視覺效果上長度為 0。
然後過渡到stroke-dasharray: 1350, 1350，表示線框短劃線和缺口的長度分別為 1350 和 1350，因為整個圖形的長度就是 1350，所以整個進度條會被慢慢填充滿。
掌握了這個技巧後，就可以使用stroke-dasharray和stroke-dashoffset製作很多不錯的互動場景：
之前我司乙個 h5 裡面應用過的，多svg圖形線條動畫配合，可以製作一些比較酷炫的動畫，很有科技感。
正文結束，我在我的 github 上，使用 svg 實現了一些圖形 -- svg奇思妙想，demo可以戳這裡。
下篇文章將會詳述非規則圖形，如何使用 ps + ai 生成path路徑，實現 svg 動畫，放個 demo，敬請期待。
（12.28更新，下篇文章已出：【web動畫】svg 實現複雜線條動畫）
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
炫酷線條動畫 svg
我們經常可以在一些頁面看到看起來很酷的線條動畫，有些可以用css實現，有些css就無能為力了，今天來研究另一種實現方式，svg 如果對svg是什麼還不了解的話，可以先去看看svg的基礎教程 一般對於複雜的線條，不提倡自己去手動畫，而應該借助illustrator之類的繪圖軟體生成後儲存位svg檔案 ...
svg波浪動畫
之前做過css動畫 canvas動畫，但svg動畫第一次做，最終效果如下圖所示。由上圖可以看出，波浪動畫是由多個不同的 波浪 組成，而每個波浪則是由近似正弦圖形組成，最後的 波動 效果，其實是靜態的波浪迴圈向左運動產生的。上面是寫好的單個波浪，其中d屬性繪製了形狀，fill屬性表示填充的顏色。d屬性...
SVG動畫之描邊動畫
svg描邊動畫使用stroke dasharray與stroke dashoffset兩個屬性 stroke dasharray屬性可將svg圖形的路徑斷為虛線，如下 是一條直線 如新增stroke dasharray 10 10屬性後，變為下圖 可見直線被分為了間隔為10px的虛線，若實現描邊效果...