首先需求是这样的， 我想通过 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 文档我确实是看不懂。。