SVG學習之stroke-dasharray 和 stroke-dashoffset 詳解

本文適合對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爲一個參數時： 實際上是表示虛線長度和每段虛線之間的間距

　　如：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 是循環的，也就是 虛線-間隔-虛線-間隔。
這個屬性要搭配stroke-dashoffset才能看得出來效果，非虛線的話，是沒法看出偏移的。

概念有點抽象，來看一個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 填充上
5.stroke-dashoffset="1"，偏移正數，虛線總體左移了1個單位，最終呈現出來的效果跟 線段4 同樣

 

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.html