javascript - 两个 svg 文本元素之间的空格

Question

我目前正在使用 JavaScript 的 SVG 元素。

这是我的场景。

我有一个 svg 元素，其中有两个这样的文本元素

<svg>
  <g transform = "translate(0, 20)">
     <text style="font-size: 0.5em;" x="0" y="-4"> text </text>
     <text style="font-size: 0.5em;" x="70" y="-4"> value </text>
  </g> 
<svg>

它看起来像这样很好

文本值

我使用了 font-size 0.5em 因为我想在我调整我的 svg 大小时调整我的文本大小。（通过使用 jquery resizable）它工作正常。但问题是当我调整我的 svg 大小时，文本之间的空间开始减少和在某个时间点，由于固定的 x 和 y 属性，测试变得如此之大，以至于两个文本相互重叠。

我想问有没有办法避免这个问题任何方法可以使两个文本之间的空间保持不变或者文本可以相对放置。

谢谢

Answer 1

转换为单个文本值似乎符合您上面概述的用例。如果您需要相对放置的文本，您可以将其转换为 tspan，然后使用 dx 和 dy 例如<text>text <tspan dx="1em" dy="1em">value</tspan></text>