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

Question

为了在SVG中垂直对齐文本,必须使用该dominant-baseline属性.这已经在SO(在SVG中对齐文本)上进行了讨论,并且是规范的一部分.

我的问题是IE9显然不支持dominant-baseline和其他一些东西.

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

这是一个适用于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"属性将向上移动文本(如果值为负)或向下移动(如果值为正).在IE中,设置"text-anchor"属性使文本在x轴上居中.虽然这可能是hackish,但IE对SVG的支持也是如此!

Answer 2

这是一个巨大的黑客,但我们可以通过考虑字体大小来近似垂直中间位置.

规范定义central如下:

中央

这标识了位于EM框中心的计算基线.

我们可以采用EM box已知的字体大小并测量其边界框来计算中心.

<?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 id="default-text" x="20" y="100" font-size="5em">
        M
    </text>
    <script>
        window.onload = function() {
            var text = document.getElementById("default-text"),
                bbox = text.getBBox(),
                actualHeight = (100 - bbox.y),
                fontSize = parseInt(window.getComputedStyle(text)["fontSize"]),
                offsetY = (actualHeight / 2) - (bbox.height - fontSize);

            text.setAttribute("transform", "translate(0, " + offsetY + ")");
        }
    </script>

    <path   d="M 10 200 h 290" stroke="blue" stroke-width=".5" />
    <text   id="reference-text" x="20" y="200" font-size="5em"
            style="dominant-baseline: central;">
        M
    </text>
</svg>

显然,代码可以更清晰,但这只是一个概念验证.