如何在不添加额外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这两个数字都受到tspan定位的影响，尽管tspan中只有2。但是，fill属性不是这样。我觉得这是一种意想不到的行为。

我知道我可以用另一个tspan和y="50"围绕着3。但这似乎很麻烦。有没有一种在tspan之后“自动”重置位置而不添加另一个tspan的方法？

Answer 1

在外部文本元素中指定多个y位置如何？您还可以编写y=“5050”，然后在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，百分比的值。例如

​

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

​

基线移位属性在Chrome中工作。不幸的是，IE目前不支持基线-移位属性。https://msdn.microsoft.com/en-us/library/gg558060(v=vs.85).aspx

不幸的是，为了使下标在所有浏览器中都能工作，您必须使用繁琐的方法，在您试图避免的第三个浏览器周围使用第二个tspan。

Answer 3

如果生成SVG，则可以在本地重置移位，而不必通过插入带有tspan和相反偏移量的零宽空间来了解周围的元素：

<text>(x<tspan class="small" dy="3">1</tspan><tspan dy="-3">&#8203;</tspan>)</text>