如何在SVG中为两条Polyline（折线）设置间距？

嘿，我来帮你搞定这个折线间距的问题～

先看你当前的代码，两条折线距离近的原因很明确：第一条折线的终点是30,42，第二条折线的起点是30,49，二者在Y轴上只相差7个单位，所以视觉上显得挤在一起。你之前尝试把它们放到独立SVG里没解决问题，大概率是因为没给每个SVG设置合适的尺寸，导致它们还是紧密排列了。

这里有两种简单直接的解决方法：

方法一：手动调整坐标点 #

直接修改第二条折线的起点Y值，拉大与第一条折线终点的距离就行。比如把第二条的起点从30,49改成30,55（甚至更大，看你想要的间距），这样就能得到明显的空隙：

<svg class="svg-container">
  <polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
  <!-- 把起点Y值从49改成55，间距从7变成13 -->
  <polyline fill="none" points="30,55 30,82 0,82" style="stroke:green"></polyline>
</svg>

方法二：用transform平移折线 #

如果不想手动修改坐标，也可以给其中一条折线添加transform属性做整体平移。比如给第二条折线加向下平移的指令，这样不用改原始点也能拉开间距：

<svg class="svg-container">
  <polyline fill="none" points="0,1 30,1 30,42" style="stroke:green"></polyline>
  <!-- 整体向下平移15个单位，translate的第二个值是Y轴偏移量 -->
  <polyline fill="none" points="30,49 30,82 0,82" style="stroke:green; transform: translate(0,15);"></polyline>
</svg>

这两种方法都能快速解决你的问题，选哪种看你更习惯哪种操作方式～

内容的提问来源于stack exchange，提问作者Hnry Cn