Internet Explorer和tspan垂直对齐

Question

要在SVG中的tspan元素内垂直对齐text元素，CSS属性alignment-baseline和dominant-baseline分别在Chrome和FF中运行良好。到目前为止一切都很好。

使用Internet Explorer它有点疯狂：

• 打开bug report断言这些属性不适用于IE9-11 ...
• ... official documentation表示支持alignment-baseline
• CSS功能 - 在IE9中嗅探＆amp; IE11报告他们支持alignment-baseline以及dominant-baseline tspan，，但它们不支持任何值
• 为沮丧添加困惑，这MSDN dev page只是说这两个属性目前都不受支持

对于IE9来说，这不会是一个问题（人们可能只是hack the desired alignment），但由于我想摆脱浏览器检测，我想知道：

• 是否有可行的跨浏览器解决方案？
• 为什么即使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坐标）

如果可以的话，只需在每个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/

最终渲染是相同的：

Answer 2

IE似乎不支持任何垂直对齐CSS属性。 tspan的呈现默认值约为alignment-baseline: central。因此，浏览器检测和polyfilling似乎是刚刚在所有浏览器中呈现相同元素的唯一选择。

我通过手动将父y元素的text属性添加到所需的字体高度差异（以像素为单位）来调整 AmeliaBR的精彩答案字体高度= hanging， - 50％= before-edge ...）。像这样：

d3.selectAll('text').each( function() 
    var text = d3.select(this);
    var dy = text.attr('y') || 0;
    var h = text.style('font-size').replace('px', '') * 1;
    var nh = (dy * 1) + (h / 2);
    text.attr('y', nh);
});

我在这里使用过d3，但显然这适用于任何JS库或纯JS DOM选择。