SVG 線條動畫入門

通常我們說的 Web 動畫，包含了三大類。

• CSS3 動畫
• javascript 動畫（canvas）
• html 動畫（SVG）

個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 SVG 中在實際專案中非常有應用價值 SVG 線條動畫。

舉個栗子

SVG 線條動畫，在一些特定的場合下可以解決使用 CSS 無法完成的動畫。尤其是在進度條方面，看看最近專案裡的一個小需求，一個這種形狀的進度條：

把裡面的進度條單獨拿出來，也就是需要實現這樣一個效果：

腦洞大開一下，使用 CSS3 如何實現這樣一個進度條呢。

CSS3 是可以做到的，就是很麻煩。但是如果採用 SVG 的話，迎刃而解。

See the Pen 不規則進度條 by Chokcoco (@Chokcoco) on CodePen.

我們假定你在閱讀本文的時候有了一定的 SVG 基礎，上面程式碼看看就懂了，好了，本文到此結束。

好吧，還是一步一步解釋，上面進度條的主要 SVG 程式碼如下：

SVG 為何

可縮放向量圖形，即SVG，是W3C XML的分枝語言之一，用於標記可縮放的向量圖形。（摘自MDN）

上面程式碼中，先談談 svg 標籤：

• version： 表示  的版本，目前只有 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：就是我們熟悉的 class
• width | 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 程式碼：

這尼瑪是什麼 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 可控制用來描邊的點劃線的圖案正規化。

它是一個和數列，數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。如果提供了奇數個值，則這個值的數列重複一次，從而變成偶數個值。因此，5,3,2等同於5,3,2,5,3,2。

解釋很蒼白，直接看例子：

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

上面，填充進度條，使用了下面這個動畫 ：

stroke-dasharray: 0, 1350;，表示線框短劃線和缺口的長度分別為 0 和 1350，所以一開始整個圖形都是被缺口占據，所以在視覺效果上長度為 0。

然後過渡到 stroke-dasharray: 1350, 1350，表示線框短劃線和缺口的長度分別為 1350 和 1350，因為整個圖形的長度就是 1350，所以整個進度條會被慢慢填充滿。

掌握了這個技巧後，就可以使用 stroke-dasharray 和 stroke-dashoffset 製作很多不錯的互動場景：

SVG 線條動畫實現按鈕互動

See the Pen svg線條動畫實現按鈕互動 by Chokcoco (@Chokcoco) on CodePen.

SVG 線條動畫實現圓形進度條

See the Pen svg線條動畫實現圓形進度條 by Chokcoco (@Chokcoco) on CodePen.

多 SVG 圖形線條動畫配合

之前我司一個 h5 裡面應用過的，多SVG 圖形線條動畫配合，可以製作一些比較酷炫的動畫，很有科技感。

See the Pen JbQNME by Chokcoco (@Chokcoco) on CodePen.

正文結束，我在我的 Github 上，使用 SVG 實現了一些圖形 — SVG奇思妙想，Demo可以戳這裡。

下篇文章將會詳述非規則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，放個 Demo，敬請期待。

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

打賞支援我寫出更多好文章，謝謝！

打賞作者