Как выровнять текст по вертикали с помощью SVG с кроссбраузерной совместимостью?

"базовая линия выравнивания" не поддерживается Firefox. Попробуйте использовать атрибут dominant-baseline. Он должен работать для обоих (Chrome и Firefox, но не для IE, см. ниже).

Посмотрите на этот старый ответ

Согласно спецификации SVG, базовая линия выравнивания применяется только к «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>

Самое простое кросс-браузерное решение — просто использовать атрибут dy со значением em.

Пока шрифт один и тот же (было бы лучше выбрать конкретный шрифт, а не общий, такой как «моноширинный»), этот трюк должен работать для любого размера шрифта.

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

Firefox до версии 40 не поддерживает должным образом значение middle в доминирующем базовом уровне ( он рассматривает его как центральный), и ни одна версия не поддерживает базовую линию выравнивания.

Я боюсь, что реализации выравнивания-базового уровня и доминирующего-базового уровня в настоящее время являются чем-то вроде минного поля, поскольку IE не поддерживает текст SVG, а Firefox поддерживает только доминирующий-базовый уровень, и его реализация этого свойства не совсем соответствует Chrome.