SVG 顶部带有文本的行

Question

我有一条 SVG 线，它通过 js 移动，我想在它上面放置一些文本，如下所示：

并且每次线条移动时，文本都应自动随之移动，同时无论长度如何，始终保持在线条的中心

我尝试了这样一种天真的方法，但显然没有用：

<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2">
  Hello there
</line>

</svg>

这样的事情是否可能，或者我是否会在 javascript 中对文本进行编程？

Answer 1

每次线条移动时，文本应自动随之移动

我认为 go 最直接的方法是：

• 使用<g>将<line>和<text>组合在一起； 接着
• 使用 javascript 转换或动画<g>元素。

注意，我在下面的示例中使用了 CSS animation 而不是 javascript，但原则成立。

---

工作示例：

 svg { width: 500px; height: 210px; } g { transform-origin: 100%; animation: rotateGroup 3s linear infinite; } line { stroke: rgb(255,0,0); stroke-width: 4px; } text { fill: rgb(255, 0, 0); font-size: 36px; } @keyframes rotateGroup { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} }

 <svg viewBox="0 0 105 250"> <g> <line x1="0" y1="185" x2="200" y2="185" /> <text x="22" y="176">Hello there</text> </g> </svg>

---

附加说明：

你提到：

无论长度如何，始终保持在线条的中心

为此，您可以在每次重新计算<line>的x1和x2值时重新计算<text>的x值。