在 span 元素的右边界处开始 svg 折线答案

【问题标题】：Start svg polyline exactly at right border of span element在 span 元素的右边界处开始 svg 折线
【发布时间】：2025-12-29 18:30:11
【问题描述】：

我有一个包含 SVG 折线的简单 html 文件：

这是我的代码：

span {
    border: 1px solid red;
}
polyline{
    fill:none;
    stroke:red;
    stroke-width:3
}

 <p>A block element containing an <span>inline element</span></p>
        <svg height="200" width="500">
            <polyline points="0,0 20,0 40,25" />
      </svg>

我想在我的span 右边框的中点开始折线。我该怎么做？

【问题讨论】：

快速尝试-jsfiddle.net/bgzr190u
@MrT 不错的尝试，但是如果您减小浏览器窗口的宽度，您会发现它会弄乱折线定位。
另一个 - jsfiddle.net/dmg0r87f 这个有溢出问题
溢出是什么意思？
在较小的屏幕上，您可以看到一个水平滚动条，可以通过设置 overflow: hidden 来修复它，但不确定这是否是所需的结果 - jsfiddle.net/fwr3a1ut

标签： html css svg

【解决方案1】：

这是一个非常基本的想法：你给 svg position:absolute 和与重叠的 html 元素相同的大小。您计算跨度的边界客户端矩形和折线开始的点的位置。 Ypu 要么平移折线，要么重写 points 属性，使其从您想要的位置开始

let bcr = sp.getBoundingClientRect();
poly.setAttribute("transform",`translate(${bcr.x+bcr.width},${bcr.y+bcr.height/2})`)

svg {
  outline: solid;
  position: absolute;
  top:0;left:0;
}
div {
  width: 500px;
  height: 200px;
}
span {
  border: 1px solid red;
}
polyline {
  fill: none;
  stroke: red;
  stroke-width: 3;
}

<div>
  <p>A block element containing an <span id="sp">inline element</span></p>
</div>
<svg height="200" width="500">
  <polyline id="poly" points="0,0 20,0 40,25" />
</svg>

【讨论】：

这看起来很不错，但是这里真的需要使用javascript吗？
另外，您似乎直接在 JS 中调用 id 名称，而没有使用更传统的 getElementById 方法。那叫什么？没见过……
如果您愿意，可以使用 getElementById 或 querySelector。在这个演示中，我使用 id 是因为代码更少，而且 - 在我看来 - 更清晰、更容易理解
html.spec.whatwg.org/multipage/…
还有*.com/questions/14478102/… 似乎按名称调用 id 是一种便利功能，不如getElementById 强大。很高兴知道。

【解决方案2】：

可能需要对您的用例进行更多修改：

<style>
  p {
    zoom: 3;
  }

  span {
    border-right: 1px solid red;
  }

  svg {
    width: 16px;
    height: 1.1em; /* line height? */
    vertical-align: middle; /* or top */
  }

  rect {
    fill: pink;
  }

  polyline {
    fill: none;
    stroke: red;
    stroke-width: 5;
  }

</style>
<p>A block element containing an <span>inline element</span><svg viewBox="0 0 40 40">
    <rect width="100%" height="100%"/>
    <polyline points="0,15 20,15 40,40" />
  </svg>
</p>

【讨论】：