如何使用CSS3實現SVG路徑描邊動畫效果

這篇文章將為大家詳細講解有關如何使用CSS3實現SVG路徑描邊動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

不依賴javascript，直接使用純css實現 svg 的描邊繪制動畫效果，效果演示動畫。

基礎知識：

SVG中有個比較重要的屬性分支 stroke ，中文軟件中稱為“描邊”。和stroke相關的屬性還有下面這些：

1、 stroke 表示描邊顏色。表示顏色的名字不是stroke-color，只是單純的stroke。它的值官方稱為“paint”，可選值的類型包括 none 、 currentColor 、 <color> 。

none
<color>
currentColor

2、 stroke-width 表示描邊的粗細。

3、 stroke-linecap 表示描邊端點表現方式?？捎弥涤校?butt 、 round 、 square 、 inherit 。圖示如下：

4、 stroke-linejoin 表示描邊轉角的表現方式?？蛇x值： 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：

stroke-dashoffset：

HTML代碼為：

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <g>
  <line fill="none" stroke="#000000" stroke-width="5" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="round" x1="0" y1="90" x2="400" y2="90"/>
 </g>
</svg>

移動滑塊時候（或文本框輸入）時候，通過setAttribute方法設置<line>節點元素的stroke-dasharray和stroke-dashoffset值，達到了上面的效果。

一個特殊情況

我們現在都試想一下，如果 stroke-dasharray 和 stroke-dashoffset 值都很大，超過了描邊路徑的總長度，會怎么樣？

用中文解釋就是，一根火腿腸12厘米，要在上面畫虛線，虛線間隔有15厘米，如果沒有 dashoffset ，則火腿腸前面15厘米會被辣椒醬覆蓋！實際上只有12厘米，因此，我們看到的是整個火腿腸都有辣椒醬。

現在， dashoffset 也是15厘米，也就是虛線要往后偏移15厘米，結果，辣椒醬要抹在火腿腸之外，也就是火腿腸上什么辣椒醬也沒有。如果換成上面的直線SVG，也就是直線看不見了。

我們把 dashoffset 值逐漸變小，則會發現，火腿腸上的辣椒醬一點一點出現了，好像辣椒醬從火腿腸根部涂抹上去一樣。

上面的兩個滑塊都右滑到底，然后下面的滑塊往左慢慢滑（請使用支持type=range的瀏覽器），您會看到直線慢慢出來了，這就是SVG路徑繪制動畫的原理。

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注意項的箭頭引導提示效果等，都很有用。

路徑的長度

如果您想知道路徑，或線條的準確長度?？赡苄枰柚鶭avaScript，類似下面的代碼：

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

關于“如何使用CSS3實現SVG路徑描邊動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。