如何在svg中添加折线之间的间距？答案

【问题标题】：How to add spacing between polylines in svg?如何在svg中添加折线之间的间距？
【发布时间】：2019-12-17 04:40:37
【问题描述】：

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

我尝试在单独的 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>

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

【问题讨论】：

标签： css svg polyline

【解决方案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>

【讨论】：

【解决方案2】：

注意：polyLine中的点属性：表示为：

x1,y1 x2,y2 ..等

你可以在第一条折线中看到：

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

第三坐标：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>

【讨论】：

这看起来更像它 :) 谢谢你知道我可以在哪里阅读更多相关信息吗？ :)
我所做的是改变折线中的点我会编辑答案来描述它
这似乎比使用转换更乏味。
@RobertLongson 我已经添加了更多描述来回答如果你想检查它

【解决方案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>

【讨论】：