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>

它看起来好像这样

文字值

我使用了字体大小为0.5em，因为我希望在调整svg大小时调整文本大小（使用jquery可调整大小）它运行正常。但问题是，当我调整svg的大小时，文本之间的空间开始减小，并且在某个时间点，测试变得如此之大，使得两个文本由于固定的x和y属性而相互重叠。 / p>

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

由于

Answer 1

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

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

1 个答案: