Как центрировать текст SVG по вертикали в IE9 - PullRequest
Новая
       38

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

21 голосов
/ 01 апреля 2011

Чтобы выровнять текст по вертикали в 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>

Ответы [ 3 ]

13 голосов
/ 17 марта 2015

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

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

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

5 голосов
/ 01 апреля 2011

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

Спецификация определяет central следующим образом:

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>

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

4 голосов
/ 01 апреля 2011

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

...