如何在不添加额外tspan的情况下重置SVG tspan定位

Question

由于某些原因，即使tspan标签已关闭，也会保留tspan元素的位置。

<svg> 
    <text x="50" y="50">1<tspan y="55" fill="red">2</tspan>3</text> 
</svg> 

http://jsfiddle.net/4fzqmeud/1/

两个数字2和3由即使只有2是tspan内tspan定位的影响。但是，fill属性并非如此。我觉得这是一个意外的行为。

我知道我可以在3附近使用另一个tspan和y="50"。但这看起来很麻烦。有没有办法在tspan之后“自动”重置位置而​​不添加另一个tspan？

Answer 1

如何在外部文本元素中指定多个y位置？如果需要，你也可以写y =“50 50 50”，然后在tspan中设置y =“55”。

<svg> 
 
    <text x="50" y="50 55 50">1<tspan fill="red">2</tspan>3</text> 
 
</svg>

Answer 2

tspan元素的fill属性是一个呈现属性，它是一个样式属性。当您离开tspan元素时，样式设置会在输入tspan之前回退到设置。

tspan元素的x/y/dx/dy属性用于更新当前文本位置。在进入tspan之前，您不希望当前的文本位置回落到设置的位置。如果确实如此，则x位置也将重置，导致tspan后面的文本与tspan元素中的文本水平重叠。

SVG规范包括设计用于处理下标和上标的基线移位属性。这是一个演示属性，因此只会影响你想要的tspan。该属性的值可以是“sub”，“super”，number，percent。例如...

<svg> 
    <text x="50" y="50">1<tspan baseline-shift="sub" fill="red">2</tspan>3</text> 
</svg> 

baseline-shift属性在Chrome中可用。不幸的是，IE目前不支持baseline-shift属性。 https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx

为了让下标在所有浏览器中都能正常工作，不幸的是，您不得不使用繁琐的方法在您试图避免的3处使用第二个tspan。