大家谁知道 SVG 的 stroke-dasharray、stroke-dashoffset 属性，具体是什么意思？
selfcreditgiving · 2020-05-30 17:33:41 +08:00 · 1452 次点击这是一个创建于 1639 天前的主题，其中的信息可能已经有所发展或是发生改变。
首先需求是这样的， 我想通过 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 文档我确实是看不懂。。
 |
1
noreplay 2020-05-30 19:05:05 +08:00 via Android
加了 offset 就可以认为是把纸条向前或者向后抽了一段。比如你下面的那个线条，就是往左抽了 50 个单位。
|
 |
3
selfcreditgiving OP @noreplay #1 哦，也就是说，offset 为正数时， 向左抽，反之为负数时，向右抽。
感觉和 mysql 语法里 limit offset 不太一样啊，limit 的 offset 是 跳过多少行数据，取后面的。 |
|
4
noreplay 2020-05-30 22:09:17 +08:00 via Android
@selfcreditgiving 呃，其实把线条作为参照物的话，就是正值向右，负值向左了。
这样就和 MySQL 里一样了🤣 |
Select Language