Как центрировать SVG-текст вертикально в IE9

Чтобы выравнивать текст по вертикали в SVG, нужно использовать атрибут dominant-baseline. Это уже обсуждалось в SO (Выравнивание текста в SVG) и является частью спецификация.

Моя проблема с IE9, которая, по-видимому, не поддерживает dominant-baseline и кучу другие вещи.

Есть ли у вас какие-либо идеи о приближении dominant-baseline: central в IE9?

Вот пример, который работает в FF и Chrome. Он не работает в IE9, Opera 11. Safari в Windows не поддерживает 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>

Ответ 1

Это гигантский взлом, но мы можем приблизиться к вертикальной средней позиции, учитывая размер шрифта.

Спецификация определяет 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>

Очевидно, что код может быть намного чище, но это всего лишь доказательство концепции.

Ответ 2

Один из способов добиться этого в IE - установить положение, относящееся к размеру шрифта:

<text font-size="WHATEVER YOU WANT" text-anchor="middle" "dy"="-.4em"> M </text>

Настройка атрибута "dy" сдвинет текст вверх (если значение отрицательное) или вниз (если значение положительное). Установка атрибута "text-anchor" центрирует текст по оси x, просто отлично в IE. Хотя это может взломать, но так же поддерживается IE SVG!

Ответ 3

Вы можете попробовать baseline-shift, чтобы увидеть, работает ли это в 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 делают.