如何在 svg 中的多段线之间添加间距？

Question

我想在两条折线之间添加间距。如何在折线之间添加间距？

我试过在单独的 svg 中添加多段线，但没有用。

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
</svg>

我希望两条折线之间有间距，但实际输出彼此接近。

Answer 1

试试这个。它可能适合你。

<svg class="svg-container">
 <polyline fill="none" points="0,1 30,1 30,30" style="stroke:green"></polyline>
 <polyline fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
 </svg>

Answer 2

注意：在polyLine中的points属性中：表示为：

x1,y1 x2,y2 .. 等等

第一条折线可以看到：

第二个坐标：x 为 30，y 为 1

第 3 个坐标：x 为 30，y 为 42

注意 y 坐标改变了 41。

所以对于第二个 polyLine 第一个 y 坐标应该从：

42（前一个坐标）+ 41（使space距离相等）= 83

您现在可以继续对第 2 和第 3 坐标进行一些计算。

工作示例：

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline fill="none" points="30,83 30,124 0,124" style="stroke:green"></polyline>
</svg>

Answer 3

您可以使用 transform 来移动东西。例如

<svg class="svg-container">
<polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
<polyline transform="translate(0, 13)" fill="none" points="30,49 30,82 0,82" style="stroke:green"></polyline>
</svg>

如何在 svg 中的多段线之间添加间距？

How to add spacing between polylines in svg?

css

svg

polyline