两个 svg 文本元素之间的空格答案

【问题标题】：Space beteen two svg text elements两个 svg 文本元素之间的空格
【发布时间】：2012-07-28 11:05:43
【问题描述】：

我目前正在使用 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 属性而相互重叠。

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

谢谢

【问题讨论】：

标签： javascript text svg

【解决方案1】：

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

【讨论】：