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

[selfcreditgiving]

首先需求是这样的， 我想通过 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>

按照我的理解是，“从线段的起点开始，跳过 50 单位后，开始循环 一个 100 实线、一个 100 虚线，这样向线段的终点画过去”，但实际并不是我认为的这样。

还有看 W3C 文档我确实是看不懂。。

[noreplay]

加了 offset 就可以认为是把纸条向前或者向后抽了一段。比如你下面的那个线条，就是往左抽了 50 个单位。

[noreplay]

@noreplay 是先循环，然后再偏移

[selfcreditgiving]

@noreplay #1 哦，也就是说，offset 为正数时， 向左抽，反之为负数时，向右抽。

感觉和 mysql 语法里 limit offset 不太一样啊，limit 的 offset 是 跳过多少行数据，取后面的。

[noreplay]

@selfcreditgiving 呃，其实把线条作为参照物的话，就是正值向右，负值向左了。
这样就和 MySQL 里一样了🤣