SVG霓虹灯特效之stroke-dasharray与stroke-dashoffset详解

最近的学习中，对于svg实现的文字霓虹灯动画感到很是有趣，而且实现起来也相对着来说比较容易，效果也不错，比如下图。

需要实现以上的效果，我们需要着重了解两个svg的属性 stroke-dasharray与 stroke-dashoffset。

stroke-dasharray

官方解释为It's a list of comma and/or white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.;--MDN

翻译过来就是它是一个用逗号或者空白隔开的length和percentage数列，length指定了短划线的长度，percentage指定了缺口的长度。如果提供了奇数个值，则这个值的数列重复一次，从而变成偶数个值。所以，如果为4，等同于4, 4 ;5,3,2等同于5,3,2,5,3,2；如下面的示例所示。

<svg viewBox="0 0 30 15" xmlns="http://www.w3.org/2000/svg">
        <!-- 当没有两个属性时 -->
        <line x1="0" y1="1" x2="30" y2="1" stroke="black" />
       
        <!-- 当两个属性相等时，平分 -->
        <line x1="0" y1="3" x2="30" y2="3" stroke="black"
                stroke-dasharray="4" />
       
        <!-- 当两个属性不相同时-->
        <line x1="0" y1="5" x2="30" y2="5" stroke="black"
                stroke-dasharray="4 1" />
          
        <!-- 当属性个数为奇数时，4 1 2 会变为 4 1 2 4 1 2 这样的排布顺序 这些数值
            会按短划线长度 缺口的长度这样子排布下去 -->
        <line x1="0" y1="7" x2="30" y2="7" stroke="black"
                stroke-dasharray="4 1 2" />
       
        <!-- 当属性个数为偶数时，会按4 1 2 3 4 1 2 3 排布 -->
        <line x1="0" y1="9" x2="30" y2=