svg - 如何在IE9中垂直居中SVG文本

Question

为了在SVG中垂直对齐文本，必须使用dominant-baseline属性。
这已经在SO(Aligning text in SVG)上进行了讨论，并且是the specification的一部分。

我的问题是IE9，显然是does not support dominant-baseline 和一堆other things。

您对在IE9中如何近似dominant-baseline: central有任何想法吗？

这是在FF和Chrome中运行的示例。它在IE9，Opera 11中不起作用。Windows上的Safari不支持central，但仍然支持middle。

<?xml version="1.0"?>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
    <path d="M 10 100 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="100" font-size="16" style="dominant-baseline: auto;">
        XXX dominant-baseline: auto; XXX
    </text>

    <path d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text x="40" y="200" font-family="sans-serif" font-size="15" style="dominant-baseline: central;">
        XXX dominant-baseline: central XXX
    </text>
</svg>

Answer 1

在IE中完成此操作的一种方法是设置与字体大小相关的位置:

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text>

设置“dy”属性将使文本向上移动(如果值为负)或向下移动(如果值为正)。设置“text-anchor”属性可使IE上的文本在x轴上居中。尽管这可能有点骇人听闻，但IE对SVG的支持也是如此!