假设你有一个SVG的线条：
<svg>
<line x1="0" y1="30" x2="500" y2="30" stroke-color="#f8a100" />
</svg>
你可以使用 [stroke-dasharray](https://css-tricks.com/almanac/properties/s/stroke-dasharray/)属性来制作破折号：
line {
stroke-dasharray: 5;
}
这个5 值是一个相对单位，基于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个单位长的破折号的实线，但它们之间没有空隙！"。
这个图案也取决于形状本身的大小。我们的SVGline 是500单位。让我们设置更大的stroke-dasharray 值，然后把它们加起来：
stroke-dasharray: 10 20 30 40 50; /* 150 units */
如果图案运行四次（150个单位⨉ 4次迭代），我们要处理的是600个总单位。额外的100个单位被砍掉了，以防止模式溢出自己。
这就是全部。
