大家谁知道 SVG 的 stroke-dasharray、stroke-dashoffset 属性，具体是什么意思？

This topic created in 2184 days ago, the information mentioned may be changed or developed.

首先需求是这样的，我想通过 svg 的这两个属性，实现箭头的流动的效果。类似下面这样

箭头动效

但是遇到 stroke-dashoffset 这个属性，一直弄不明白它的原理。
查了 MDN 和一些网上的介绍文章，还是没搞懂，这个 offset 是具体是向前 offset 还是向后 offset 。

打比方画一条直线：

一条直线

上代码，现在加上 stroke-dasharray="100"

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <g>
        <line stroke="#000000"
              stroke-width="19"
              stroke-dasharray="100"
              x1="0" y1="90" x2="400" y2="90"/>
    </g>

    <g>
        <line stroke="#ccc"
              stroke-width="19"
              x1="0" y1="150" x2="400" y2="150"/>
    </g>
</svg>

效果是这样的，一段实线 100，一段虚线 100，（注意是先实线，后虚线！）这样不断重复下去。。。
注：下面一条线是用来作对比的。
虚线效果

然后加上 stroke-dashoffset="50"

<svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
    <g>
        <line stroke="#000000"
              stroke-width="19"
              stroke-dasharray="100"
              stroke-dashoffset="50"
              x1="0" y1="90" x2="400" y2="90"/>
    </g>

    <g>
        <line stroke="#ccc"
              stroke-width="19"
              x1="0" y1="150" x2="400" y2="150"/>
    </g>
</svg>

加上 offset