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>

设置＆＃34; dy＆＃34;属性将向上移动文本（如果值为负）或向下移动（如果值为正）。设置＆＃34; text-anchor＆＃34;属性将文本放在x轴上，在IE中就好了。虽然这可能会破坏，但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>

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

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确实支持。

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

3 个答案: