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中的in points属性：它表示为：

x1，y1 x2，y2 ..等

您可以在第一条多义线中看到：

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

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

请注意，y坐标已更改41。

因此对于第二polyLine，第一个y坐标应从以下位置开始：

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

您现在可以通过一些计算继续第二和第三坐标。

工作示例：

<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中的折线之间增加间距？

3 个答案: