stroke-dasharray 模式的工作原理

假设您在 SVG 中有一条线

<svg>
  <line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>

您可以使用 CSS 中的 stroke-dasharray 属性创建虚线

line {
  stroke-dasharray: 5;
}

该 5 值是基于 SVG viewBox 大小的相对单位。实际上，我们可以使用任何 CSS 长度。但它的作用是创建长度为 5 个单位、间隙为 5 个单位的虚线模式。

到目前为止，一切顺利。我们可以使用两个值，其中第二个值单独设置间隙长度

现在我们拥有长度为 5 个单位、间隙为 10 个单位的虚线。让我们尝试第三个值

您是否看到我们正在这里形成的模式？它是

您可能会认为它之后会以完全相同的节奏重复。但事实并非如此！如果这样的话，我们的虚线会相互碰撞

相反， 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 个单位会被截断，以防止该模式溢出自身。

就这样。

🎩 向 Joshua Dance 致敬，感谢他指出了这一点！

评论