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

Question

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

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

数字 2 和 3 都受到 tspan 定位的影响，即使只有 2 在 tspan 内。但是，fill 属性并非如此。我发现这是一种意外行为。

我知道我可以在 3 周围使用另一个 tspan 和 y="50"。但这似乎很麻烦。有没有办法 "automatically" 在 tspan 之后重置位置而不添加另一个 tspan？

Answer 1

tspan 元素的 fill 属性是一个表示属性，它是一种样式属性。当您离开 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>

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

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

Answer 2

如何在外部文本元素中指定多个 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 3

如果生成 SVG，则可以通过插入 tspan 和 zero-width space 以及相反的偏移量来在本地重置移位而不必知道周围的元素：

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

How to reset SVG tspan positioning without adding an additional tspan