Question

我正在尝试理解svg中的tspan标签，这里有些奇怪。看看下面的代码，FF和Chrome在tspans之间引入了一个水平偏移，但不应该有任何。

<svg width="625" height="470" xmlns="http://www.w3.org/2000/svg">
<text y="406" x="379" text-anchor="start" stroke-width="0" stroke="#000000" fill="#FF0000">
<tspan x="379" font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000" dy="0">a</tspan>
<tspan font-weight="normal" font-style="normal" font-size="24" font-family="Arial" fill="#000000">aa</tspan>
</text>
</svg>

现在转到http://svg-edit.googlecode.com/svn/trunk/editor/svg-editor.html并在SVG编辑器中输入代码（顶部菜单栏中的第二个按钮）并应用更改。 tspans之间的偏移不存在！我无法找出原因，HTML，SVG和CSS似乎没什么特别的。

我希望有人可以解决这个谜题。它似乎连接到font-size，更改它会改变偏移量。但是当它设置为0px时，文本消失。

Answer 1

tspans之间的换行符将转换为空格。我猜svg-edit会将它们剥离。

Answer 2

我尝试向 tspan 标签添加水平空间，属性为 dy（从顶部）和 dx（从左侧），如下所示：

<tspan dy="8">
  <tspan dx="5">200</tspan>
</tspan>

可能对某人有帮助。

SVG tspan水平偏移

2 个答案: