由于某种原因，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定位影响，即使只有2在tspan. 但是，fill属性并非如此。我发现这是一种意想不到的行为。
我知道我可以tspan在y="50". 3但这似乎很麻烦。有没有办法在tspan不添加另一个tspan的情况下“自动”重置位置？
tspan 元素的填充属性是一个表示属性，它是一个样式属性。当您离开 tspan 元素时，样式设置会回退到进入 tspan 之前的设置。
tspan 元素的 x/y/dx/dy 属性用于更新当前文本位置。您不希望当前文本位置回退到输入 tspan 之前的设置。如果是这样，那么 x 位置也将重置，导致 tspan 之后的文本与 tspan 元素中的文本水平重叠。
SVG 规范包括一个baseline-shift 属性，该属性旨在处理下标和上标。这是一个表示属性，因此只会影响您想要的 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。
如何在外部文本元素中指定多个 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>tspan如果生成 SVG，则可以通过插入具有零宽度空间和相反偏移量的 a 来在本地重置移位，而无需知道周围的元素：
<text>(x<tspan class="small" dy="3">1</tspan><tspan dy="-3">​</tspan>)</text>