本文適合對SVG已經有所瞭解，但是對stoke-dasharray和stroke-dashoffset用法有疑問的童鞋

第一：概念解釋

1. stroke意思是：畫短線於，在...上劃線

2. stroke-dasharray:用於建立虛線，之所以後面跟的是array的，是因為值其實是陣列。請看下面解釋

stroke-dasharray = '10'
stroke-dasharray = '10, 5'
stroke-dasharray = '20, 10, 5'

　　如：stroke-dasharray = '10' 表示：虛線長10，間距10，然後重複 虛線長10，間距10

兩個引數或者多個引數時：一個表示長度，一個表示間距
　　如：stroke-dasharray = '10, 5' 表示：虛線長10，間距5，然後重複 虛線長10，間距5
　　如：stroke-dasharray = '20, 10, 5' 表示：虛線長20，間距10，虛線長5，接著是間距20，虛線10，間距5，之後開始如此迴圈

3. stroke-dashoffset： offset：偏移的意思。
這個屬性是相對於起始點的偏移，正數偏移x值的時候，相當於往左移動了x個長度單位，負數偏移x的時候，相當於往右移動了x個長度單位。
需要注意的是，不管偏移的方向是哪邊，要記得dasharray 是迴圈的，也就是 虛線-間隔-虛線-間隔。

概念有點抽象，來看一個MDN的例子，圖中紅線段是偏移的距離

上圖效果分別是：
1.沒有虛線
2.stroke-dasharray="3 1" ，虛線沒有設定偏移，也就是stroke-dashoffset值為0
3.stroke-dashoffset="3"，偏移正數，虛線整體左移了3個單位，圖中3後面的紅線段，就是起始線段，線段之後是1個單位的間隔，我們可見區域從這個間隔開始，然後迴圈 3-1,3-1的虛線-間隔-虛線-間隔
4.stroke-dashoffset="-3"，偏移負數，虛線整體右移動了3個單位，由於dasharray 是迴圈的，前面偏移的位置會有dasharray 填充上

2.示例

利用這兩個屬性，我們可以做出好看的動畫效果

線段從無到有，由短變長

實現思路就是：
第一步：設定stroke-dasharray虛線長度等於當前svg的寬度，間隔大於或者等於svg寬度

<svg >
　　<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>
</svg>

這時候的效果是這樣的，可視區域內只能看到一段虛線

第二步：設定stroke左移 300單位（stroke-dashoffset:300），也就是剛好隱藏了虛線，可視區域內變成了320單位的間隔，

第三步：當滑鼠移入的時候，使offset由300變成0，就實現了動圖中的效果

svg:hover #line{
    stroke-dashoffset: 0;
}
#line{
    transition: all 2s;
}

圓形環繞一圈效果

滑鼠hover的時候，外層線段繞自身一圈。這個動畫的實現原理，跟上面的是一毛一樣的
設定stroke-dasharray虛線長度等於當前圓的周長，間隔大於或者等於圓的周長

第一步：先畫出一個圓圈：程式碼如下，圓的半徑設定為50

<svg  width="200" height="200" viewBox="0 0 200 200">
   <circle id="circle" cx="100" cy="80" r="50"  fill="gray" stroke-width="5" stroke="green" />
</svg>

第二步：設定圓的stroke-dasharray和stroke-dashoffset，為圓的周長

#circle{
     transition: all 2s;
     stroke-dasharray:314,314;
     stroke-dashoffset:314;
 }

第三步：hover的時候，設定stroke-dashoffset為0，注意圓的stroke起始位置為右側中間

svg:hover #circle{
    stroke-dashoffset:0;
}

圓形環繞的效果就做好了~

碼字不易，覺得有幫助，不妨點個贊哦~

原創文章，轉載請加原文連結：https://www.cnblogs.com/daisygogogo/p/11044353.html

程式碼在github倉庫：

https://github.com/daisygogogo/my-demo/blob/master/svg-line-circle.