SVG绘制指定长度与间距垂直线的问题及通用解法问询

我来帮你分析下问题所在，然后给出调整方案和通用写法~

问题根源 #

你当前的代码里，每条线的起始y坐标是depth * 180，结束位置是depth * 180 + 60。这样算下来，前一条线的底部（y2）到后一条线的顶部（y1）的距离是(depth+1)*180 - (depth*180 +60) = 120——这就是为什么实际间距是120，而不是你想要的180。你之前的计算逻辑是把每条线的起始位置直接按depth乘以间距来设置，但忽略了线条本身的长度，导致间距被线条长度"吃掉"了一部分。

另外，你当前的SVG viewBox高度只有200，根本装不下这些线条（按正确逻辑计算的话，第二条线的起始位置就到240了），所以得把视口高度调大。

修正后的代码（针对你的需求） #

要实现两条线之间的空隙为180，正确的逻辑应该是：下一条线的起始位置 = 上一条线的结束位置 + 180。调整后的代码如下：

<svg viewBox="0 0 200 1200" width="200" height="1200">
  ${[1, 2, 3, 4, 5].map(function(depth) {
    const lineLength = 60;
    const spacing = 180;
    // 计算当前线的起始y：前面所有线的总长度 + 前面所有间距的总和
    const y1 = (depth - 1) * (lineLength + spacing);
    const y2 = y1 + lineLength;
    return `<line x1="100" y1="${y1}" x2="100" y2="${y2}" stroke="black" />`;
  }).join('')}
</svg>

通用绘制方法（任意长度l、间距d） #

不管你要画多少条、什么规格的垂直线，都可以套用这个逻辑：

1. 确定核心参数：线条长度l、线条间空隙d、线条数量count、垂直线的水平位置（比如居中就取SVG宽度的一半）。
2. 计算每条线的坐标：
   • 对于第index条线（从0开始计数，对应数组的索引）：
     • 起始y坐标：index * (l + d) —— 前面所有线的长度加所有空隙的总和
     • 结束y坐标：起始y + l
3. 调整SVG视口：viewBox的高度要能容纳所有线条，计算公式是总高度 = count * l + (count - 1) * d，可以适当加一点边距让显示更舒服。

通用代码模板

<svg viewBox="0 0 [svg宽度] [总高度]" width="[显示宽度]" height="[显示高度]">
  ${Array.from({length: [线条数量]}).map((_, index) => {
    const lineLength = [你的长度l];
    const spacing = [你的间距d];
    const y1 = index * (lineLength + spacing);
    const y2 = y1 + lineLength;
    // 这里的x1/x2替换成你想要的水平位置，比如svg宽度的一半
    return `<line x1="100" y1="${y1}" x2="100" y2="${y2}" stroke="black" />`;
  }).join('')}
</svg>

实际例子

比如要画4条长度80、间距150的垂直线，SVG宽度设为200（水平位置100居中），总高度就是4*80 + 3*150 = 770，代码如下：

<svg viewBox="0 0 200 770" width="200" height="770">
  ${Array.from({length: 4}).map((_, index) => {
    const lineLength = 80;
    const spacing = 150;
    const y1 = index * (lineLength + spacing);
    const y2 = y1 + lineLength;
    return `<line x1="100" y1="${y1}" x2="100" y2="${y2}" stroke="black" />`;
  }).join('')}
</svg>

内容的提问来源于stack exchange，提问作者Haslo Vardos