假设您在 SVG 中有一行：
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>您可以使用 stroke-dasharray CSS中的属性来制作破折号：
line {
stroke-dasharray: 5;
}那个 5 value 是基于 SVG 大小的相对单位 viewBox. 我们可以使用任何 CSS 长度，真的。 但它所做的是制作一个 5 个单位长的破折号图案，它们之间有 5 个单位的间隙。
到目前为止，一切都很好。 我们可以使用两个值，其中第二个值单独设置间隙长度：
现在我们有 5 个单位的破折号和 10 个单位的间隙。让我们尝试第三个值：
看看我们是如何在这里形成一个模式的？ 它去：
- 短跑：5个单位
- 间隙：10 个单位
- 短跑：15个单位
你会认为它以完全相同的节奏重复。 但不是！ 如果是这样，我们会有破折号相互碰撞：
- 短跑：5个单位
- 间隙：10 个单位
- 短跑：15个单位
- 短跑：5个单位
- 间隙：10 个单位
- 短跑：15个单位
- …等等。
相反， stroke-dasharray 如果有奇数个值，则变得聪明并复制模式所以......
stroke-dasharray: 5 10 15;
/* is the same as */
stroke-dasharray: 5 10 15 5 10 15;这实际上就是为什么单个值起作用的原因！ 早些时候，我们宣布了一个单一的 5 价值。 这真的和说的一样 stroke-dasharray: 5 5. 没有第二个值， stroke-dasharray 隐式复制第一个值以获得可重复的模式。 否则，它只是一条 5 个单位长的实线，但它们之间没有间隙！
图案还取决于形状本身的大小。 我们的 SVG line 是 500 个单位。 让我们设置更大 stroke-dasharray 值并将它们相加：
stroke-dasharray: 10 20 30 40 50; /* 150 units */如果模式运行四次（150 个单位 ⨉ 4 次迭代），我们将处理总共 600 个单位。 额外的 100 个单位被删除以防止模式溢出。
就这样。
