SVG：理解stroke-dasharray和stroke-dashoffset屬性

1.前言

最近剛學習SVG看到一個霓虹燈的動畫效果感受很炫酷，便按照文章巧了下來，雖然實現了可是對於 stroke-dasharray和stroke-dashoffset屬性還不是特別清楚，經過查找資料和看文檔終於理解，但願對你們有幫助

2.屬性做用

咱們知道SVG是在畫畫，那麼stroke屬性系列就是畫筆。 stroke-dasharray和stroke-dashoffset是stroke的兩個屬性

stroke-dasharray

定義

官方文檔給出的解釋是：The stroke-dasharray property controls the pattern of dashes and gaps used to form the shape of a path's stroke. 按照個人理解：stroke-dasharray就是控制畫筆的虛實，經過實線和虛線的來控制畫

做用範圍

能夠在shape(形狀)和text content elements(字體元素)上起做用

參數

接下來重點講下他的參數，這裏是多是你們最沒法理解的地方。dasharray顧名思義就是線段的數組，他的參數能夠是一個數組，每一個參數又有什麼含義呢 官方文檔解釋： **The first value and every second value in the list after it specifies the length of a dash, and every other value specifies the length of a gap between the dashes. ** 意思就是單數值表明實線的長度，雙數值表明虛線的長度

例子

下圖中每一個大方格邊長是100px，線段的初始長度是200px

stroke-dasharray: 0;
複製代碼

此時stroke-dasharray不起做用，注:當他的參數<=0時該屬性將失效

stroke-dasharray: 20;
複製代碼

能夠看出來實線的長度確實是20px，爲何會有虛線也是20呢，這裏官方文檔給出的解釋是：If the list has an odd number of values, then it is repeated to yield an even number of values. 也就是說若是參數個數是單數是默認會複製一份參數，好比1 2 3 將會變成1 2 3 1 2 3六個參數

troke-dasharray: 120;
複製代碼

按理來講在一個參數的狀況下虛線和實線應該是等長的這裏不等長,很好理解描繪的是線段，超出部分將會隱藏。可是若是是個封閉圖形，結果也是相同的

這裏是一個參數的多個參數也同樣的，本質上就是根據實線和虛線的長度依次描繪，這裏就不測試了。

另外他的參數還能夠是百分比，這樣就不須要知道總長就能精確使用了，若是要知道總長能夠使用js獲取Path元素的pathLength屬性

var path = document.querySelector('path');
var length = path.getTotalLength();
複製代碼

stroke-dashoffset

理解了stroke-dasharray那麼理解stroke-dashoffset就簡單了

定義

官方文檔：The stroke-dashoffset property specifies the distance into the repeated dash pattern to start the stroke dashing at the beginning of the path. If the value is negative, then the effect is the same as dash offset d: 意思就是：相對於繪製的起點偏移的量，正值(向右或者順時針偏移)，負值(向左或者逆時針)

偏移量計算公式：

d = s - | 'stroke-dashoffset' | mod s
d:偏移量  s:線段總長度  'stroke-dashoffset':參數值
複製代碼

從公式咱們能夠看出偏移量是一個區間的值，不管參數值多大，偏移量不會大於線段總長度

做用範圍

和上面同樣能夠在shape(形狀)和text content elements(字體元素)上起做用 而且可支持動畫，從而實現炫酷的效果

參數

另外因爲咱們實際設置stroke-dashoffset參數的時候不會大於線段長度，用上面的公式計算未免麻煩，咱們能夠逆向理解，偏移量就是正值(向左或者逆時針)/負值(向右或者順時針)偏移stroke-dashoffset參數的大小。

例子

stroke-dasharray: 120;
stroke-dashoffset: 0;
複製代碼

上面爲初始狀態，參數爲0，沒偏移

stroke-dasharray: 120;
stroke-dashoffset: 20;
複製代碼

當參數爲20若是按照官方文檔的理解就是：d = 200 - 20 mod 200 = 180 向右偏移了180px 而從圖中明顯能夠看到線段往左移動了20px，因此咱們能夠理解爲想左偏移了參數值,封閉圖形是逆時針，你們本身能夠去試試。負值同理以下圖

stroke-dasharray: 120;
stroke-dashoffset: -20;
複製代碼

總結

到這裏咱們基本就理解了stroke-dasharray和stroke-dashoffset這兩個屬性的做用和參數的意義，因爲stroke-dashoffset是閉包循環的，咱們就能夠使用動畫效果作出炫酷的SVG效果如: 霓虹燈字體

第一次在掘金寫文章，排版問題多多見諒！

參考資料

張鑫旭-鑫空間 W3官方文檔