svg - 如何在不添加额外 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 的影响定位即使只有 2在 tspan 里面.然而， fill 并非如此属性。我发现这是一个意想不到的行为。

我知道我可以使用另一个 tspan与 y="50"周围 3 .但这似乎非常麻烦。有没有办法在 tspan 之后“自动”重置位置不添加另一个 tspan？

Answer 1

tspan 元素的 fill 属性是一个presentation 属性，它是一个样式属性。当您离开 tspan 元素时，样式设置将回退到进入 tspan 之前的设置。
tspan 元素的 x/y/dx/dy 属性用于更新当前文本位置。在输入 tspan 之前，您不希望当前文本位置回退到其设置。如果是这样，那么 x 位置也会重置，导致 tspan 后面的文本与 tspan 元素中的文本水平重叠。
SVG 规范包括一个baseline-shift 属性，用于处理下标和上标。这是一个演示属性，因此只会像您想要的那样影响 tspan。该属性的值可以是“sub”、“super”、数字、百分比。例如

   <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
为了让下标在所有浏览器中工作，不幸的是，您似乎必须使用繁琐的方法，在您试图避免的 3 周围使用第二个 tspan。