javascript - Internet Explorer 和 tspan 垂直对齐

要在 SVG 中的 tspan 元素内垂直对齐 text 元素，CSS 属性 alignment-baseline 和 dominant-baseline 分别在 Chrome 和 FF 中工作得很好。到现在为止还挺好。

使用 Internet Explorer，它变得有点疯狂:

一个开放的 bug report 断言这些属性不适用于 IE9-11 ...

... 但是 official documentation 声明支持 alignment-baseline

IE9 和 IE11 中的

CSS 功能嗅探报告说，它们支持 alignment-baseline 以及 dominant-baseline 的 tspan ，但它们不适用于任何值

增加了对挫折的困惑，这个 MSDN dev page 只是说这两个属性目前都不受支持

这对于 IE9 来说不是这样的问题(一个人可以简单地 hack the desired alignment )，但由于我想摆脱浏览器检测，我想知道:

是否有可行的跨浏览器解决方案？

为什么 IE11 不支持这个基本的 SVG 样式属性以及如何解决这个问题？

谢谢!

最佳答案

我不知道为什么 IE 不支持对齐基线，更不用说为什么你会得到如此混合的信息。

您可以使用 dy 属性和基于字体的单位(“em”和“ex”)对相同的行为进行排序。如果您只想将特定文本元素放在一个点上，它会非常有效。

<text x="50%" y="50%" dy="0.5ex" text-anchor="middle">
    This text will be centered in your coordinate system!
</text>

但是 dy 的问题在于——除非 y 也为同一元素显式设置——它是相对于前一个字符的位置计算的。因此，如果您想将文本跨度相对于周围的跨度居中，您必须首先调整任何先前的偏移量，然后设置新的偏移量。生成的代码并不漂亮:

<text x="50%" y="25%" font-size="150%">
    <tspan dy="0.5ex">Large font with</tspan><tspan
        dy="-0.5ex">&nbsp;<tspan
        font-size="50%" dy="0.5ex">small font<tspan
        dy="-0.5ex">&nbsp;</tspan></tspan></tspan><tspan
    dy="0.5ex">embedded.</tspan>
</text>
<text x="50%" y="75%" font-size="75%">
    <tspan dy="0.5ex">Small font with</tspan><tspan
        dy="-0.5ex">&nbsp;<tspan
        font-size="200%" dy="0.5ex">large font<tspan
        dy="-0.5ex">&nbsp;</tspan></tspan></tspan><tspan
    dy="0.5ex">embedded.</tspan>

http://fiddle.jshell.net/awj49/

在 IE11 中渲染:

(灰线标记引用 y 坐标)

如果可以，只需在每个 tspan 上显式设置 y 属性，代码就会更简洁:

<text x="50%" font-size="150%">
    <tspan y="25%" dy="0.5ex">Large font with</tspan>
    <tspan font-size="50%" y="25%" dy="0.5ex">small font</tspan>
    <tspan y="25%" dy="0.5ex">embedded.</tspan>
</text>
<text x="50%" y="75%" font-size="75%">
    <tspan y="75%" dy="0.5ex">Small font with</tspan>
    <tspan font-size="200%" y="75%" dy="0.5ex">large font</tspan>
    <tspan y="75%" dy="0.5ex">embedded.</tspan>
</text>

http://fiddle.jshell.net/awj49/1/

最终渲染是一样的:

关于javascript - Internet Explorer 和 tspan 垂直对齐，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22513185/