两个 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 可调整大小）它工作正常，但问题是当我调整 svg 大小时，文本之间的间距会减小，并且在某些情况下由于固定的 x 和 y 属性，文本变得太大以至于两个文本彼此重叠。

有没有办法避免这个问题。一种可以保持两个文本之间的间距不变或者文本可以相对放置的方法。

Answer 1

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