svg - 沿线分布小破折号

Question

我如何沿着这条线分布小破折号（比如说 10 个）？

{#each segments as segment}
    <line x1={} x2={} y1={} y2={} />
{/each}

标签： svgsvelte

Answer 1

这可以使用纯 SVG 轻松解决。

首先，我们将线的pathLength(number of dashes * 2) - 1设置为我们想要绘制的。此属性会将所有其他基于长度的计算缩放到此数字。然后我们简单地设置一个stroke-dasharrayto1 1以每隔一个单位放置一个破折号（请注意，这是由于pathLength

所以我们会得到：

<line x1={} x2={} y1={} y2={} pathLength={19} stroke-dasharray="1 1" />

您需要将长度设置为该数字的原因是因为您希望第一个和最后一个破折号可见，以下几行显示了不同长度的效果，其中 1 可见 0 不可见

• 1 0 1 0 1
• 1 0 1 0 1 0

如您所见，如果我们只是将所需数量的破折号加倍，最后一个破折号不会与行尾对齐。