Javascript 两个svg文本元素之间的空间

我目前正在使用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>

文本
价值

它看起来像这样好

<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>

文本值

我使用了字体大小0.5em，因为我想在调整svg大小时调整文本大小。（使用jquery Resizeable） 但问题是，当我调整svg的大小时，文本之间的空间开始减少，在某个时间点，测试变得如此之大，以至于由于固定的x和y属性，两个文本彼此重叠

我想问的是，有没有一种方法可以避免这个问题，通过任何方法，我可以保持两个文本之间的空间不变，或者文本可以相对放置

---

谢谢

转换为单个文本值似乎符合上面概述的用例。如果您需要相对放置的文本，您可以将一个文本转换为tspan，然后使用dx和dy。例如，

文本值

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

文本值