Internet Explorer和tspan垂直对齐

Question

要垂直对齐tspan元素的内部text在SVG,CSS属性元素alignment-baseline,并dominant-baseline在Chrome和FF,分别工作的伟大.到现在为止还挺好.

使用Internet Explorer它有点疯狂:

• 一个开放的bug报告声称这些属性不适用于IE9-11 ......
• ...但官方文件说明alignment-baseline支持
• CSS功能嗅探在IE9和IE11报告说,他们支持alignment-baseline以及dominant-baseline为tspan,但他们没有任何价值的工作
• 为了给挫折添加困惑,这个MSDN开发页面简单地说两个属性当前都不受支持

对于IE9来说这不是一个问题(人们可能只是破解了所需的对齐),但由于我想摆脱浏览器检测,我想知道:

• 有可行的跨浏览器解决方案吗？
• 为什么甚至IE11不支持这个基本的SVG样式属性以及如何解决这个问题？

谢谢!

Answer 1

我不知道为什么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坐标)

如果可以的话,只需y在每个tspan上显式设置属性,它就会变得更加清晰:

<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/

最终渲染是相同的: