如何使用具有跨浏览器兼容性的 SVG 垂直对齐文本？答案

【问题标题】：How to align a text vertically using SVG with cross-browser compatibility?如何使用具有跨浏览器兼容性的 SVG 垂直对齐文本？
【发布时间】：2015-10-01 02:21:21
【问题描述】：

注意以下sn-p：

<svg style="" width="60" height="60">
    <rect 
        x            = "0"
        y            = "0"
        rx           = "1"
        ry           = "1"
        width        = "17"
        height       = "15"
        fill         = "rgb(254,199,186)"
        stroke       = "rgb(152,119,111)"
        stroke-width = "1">
    </rect>
    <text 
        x                  = "8"
        y                  = "8"
        fill               = "rgb(50,39,37)"
        font-size          = "16"
        font-family        = "monospace"
        alignment-baseline = "middle"
        text-anchor        = "middle">
        a
    </text>
</svg>

Chrome 将 sn-p 呈现为：

而在 FireFox 上，结果如下：

如何以跨浏览器兼容的方式复制此 sn-p？

【问题讨论】：

相关：Firefox support for alignment-baseline element?

标签： html css svg cross-browser

【解决方案1】：

Firefox 不支持“alignment-baseline”。尝试使用属性“dominant-baseline”，它应该适用于两者（Chrome 和 Firefox，但不适用于 IE，见下文）。

看看这个old answer

根据 SVG 规范，alignment-baseline 仅适用于“tspan”、“textPath”、“tref”和“altGlyph”。我的理解是，它是用来抵消它们上面的“文本”对象的。我认为您正在寻找的是主导基线。

它适用于 Chrome 和 Firefox，但不适用于 IE。如果您还想在 IE 中使用垂直居中的文本，则必须使用这样的工作区：

<svg style="" width="60" height="60">
<rect 
    x            = "0"
    y            = "0"
    rx           = "1"
    ry           = "1"
    width        = "17"
    height       = "15"
    fill         = "rgb(254,199,186)"
    stroke       = "rgb(152,119,111)"
    stroke-width = "1">
</rect>
<text 
    id                 = "default-text"
    x                  = "8"
    y                  = "8"
    fill               = "rgb(50,39,37)"
    font-size          = "16"
    font-family        = "monospace"
    alignment-baseline = "middle"
    dominant-baseline  = "middle"
    text-anchor        = "middle">
    a
</text><script>
    window.onload = function() {
        var text = document.getElementById("default-text"),
            bbox = text.getBBox(),
            actualHeight = (4 - bbox.y),
            fontSize = parseInt(window.getComputedStyle(text)["fontSize"]),
            offsetY = (actualHeight / 2) - (bbox.height - fontSize);

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

【讨论】：

你的第一句话有点误导，因为它是错误的（正如你在第三段中解释的那样）。
对不起，我会尽量解释清楚

【解决方案2】：

最简单的跨浏览器解决方案就是使用带有em 值的dy 属性。

只要字体相同（最好选择特定字体而不是像“等宽”这样的通用字体），这个技巧应该适用于任何字体大小。

<svg style="" width="60" height="60">
    <rect 
        x            = "0"
        y            = "0"
        rx           = "1"
        ry           = "1"
        width        = "17"
        height       = "15"
        fill         = "rgb(254,199,186)"
        stroke       = "rgb(152,119,111)"
        stroke-width = "1">
    </rect>
    <text 
        x                  = "8"
        y                  = "8"
        fill               = "rgb(50,39,37)"
        font-size          = "16"
        font-family        = "monospace"
        text-anchor        = "middle"
        dy                 = "0.25em">
        a
    </text>
</svg>

【讨论】：

【解决方案3】：

Firefox prior to version 40 不正确支持显性基线中的值中间（将其视为中心），并且没有版本支持对齐基线。

我担心alignment-baseline 和dominant-baseline 的实现目前有点雷区，因为IE 不支持SVG 文本，而Firefox 只支持dominant-baseline，并且它对该属性的实现不太一致铬的。

【讨论】：