可以这么理解。为了更透彻理解“虚线”描边属性 stroke-dasharray 可以看如下例子：
<style>
终于明白了，由衷感谢马老师悉心答疑解惑{:4_180:} 本帖最后由 杨帆 于 2026-6-12 20:43 编辑 <br /><br />马黑黑 发表于 2026-6-12 14:18
19楼，你可以拿代码去测试，将第五根 line 的 stroke-dasharray 设置为 500，看看是什么情况。此外，还可 ...
stroke-dasharray 虚线中的实线设置为大于原本长度的数字，同时设置间隙数为 20，偏移量不变，会发生什么呢？
此时，循环动画的作用，使得下一个虚线单元的实线段落到可视区域内（如下图，设置实线段450），对吗？，请马老师指正~{:4_190:}
<style>
#msvg {
display: block;
margin: auto;
border: 1px dashed gray;
line {
stroke: red;
stroke-width: 4;
&:nth-of-type(2) { stroke-dasharray: 50; }
&:nth-of-type(3) { stroke-dasharray: 50 20; }
&:nth-of-type(4) { stroke-dasharray: 400; }
&:nth-of-type(5) { stroke-dasharray: 400; stroke-dashoffset: 200; }
&:nth-of-type(6) { stroke-dasharray: 450 20; stroke-dashoffset: 200; }
}
path {
fill: none;
stroke: gray;
stroke-width: 0.45;
stroke-dasharray: 4 2;
}
}
</style>
<svg id="msvg" width="600" height="500">
<path d="M300 0 L300 300" />
<line x1="100" y1="50" x2="500" y2="50" />
<line x1="100" y1="100" x2="500" y2="100" />
<line x1="100" y1="150" x2="500" y2="150" />
<line x1="100" y1="200" x2="500" y2="200" />
<line x1="100" y1="250" x2="500" y2="250" />
<line x1="100" y1="300" x2="500" y2="300" />
</svg> 杨帆 发表于 2026-6-12 20:42
本帖最后由 杨帆 于 2026-6-12 20:43 编辑
stroke-dasharray 虚线中的实线设置为大于原本长度的数字， ...
是这个道理 杨帆 发表于 2026-6-12 20:35
终于明白了，由衷感谢马老师悉心答疑解惑
{:4_190:} 马黑黑 发表于 2026-6-12 21:42
是这个道理
终于明白其原理了，由衷感谢马老师循循善诱、诲人不倦{:4_180:} 杨帆 发表于 2026-6-12 21:50
终于明白其原理了，由衷感谢马老师循循善诱、诲人不倦
{:4_191:}
页:
1
[2]