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

Question

为了在SVG中垂直对齐文本，必须使用主导基线属性。 这已经在SO上进行了讨论（在svg 中对齐文本，是规格。

My problem is with IE9 which apparently does not support 主要基础 和一堆其他东西。

您对如何近似主导基线有任何想法：IE9中的中央吗？

这是在FF和Chrome中起作用的样本。它在IE9，Opera 11中不起作用。Windows上的Safari不支持Central，而是支持中间仍然很好。

<?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 轴上居中。虽然这可能有些骇人听闻，但 IE 对 SVG 的支持也是如此！

Answer 2

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

该规范定义了central，如下所示：

中央

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

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

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

显然，代码可以更加简洁，但这只是一个概念验证。

Answer 3

您可以尝试基线移位，看看它在 IE9 中是否有效：

<?xml version="1.0"?>
<svg width="300" height="500" 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>

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

Firefox 似乎不支持基线移位，但 Webkit 和 Opera 支持。