make - svg viewbox auto

Cómo centrar el texto SVG verticalmente en IE9

Question

Para alinear el texto verticalmente en SVG, uno tiene que usar el atributo de dominant-baseline . Esto ya ha sido discutido en SO ( Alinear texto en SVG ) y es parte de la especificación .

Mi problema es con IE9, que aparentemente no es compatible dominant-baseline y muchas otras cosas .

¿Tiene alguna idea sobre cómo aproximarse dominant-baseline: central en IE9?

Aquí hay una muestra que funciona en FF y Chrome. No funciona en IE9, Opera 11. Safari en Windows no es compatible con central , pero es compatible con el middle que sigue siendo bueno.

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

Este es un hack gigante, pero podemos aproximar la posición media vertical teniendo en cuenta el tamaño de la fuente.

La especificación define central así:

central

Esto identifica una línea de base calculada que está en el centro del cuadro de EM.

Podemos tomar un EM box de tamaño de fuente conocido y medir su cuadro delimitador para calcular el centro.

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

Obviamente, el código puede ser mucho más limpio, pero esto es solo una prueba de concepto.

Answer 2

Puedes probar baseline-shift para ver si funciona en 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>

Sin embargo, Firefox no parece admitir el cambio de línea de base, pero Webkit y Opera sí lo hacen.

Answer 3

Una forma de lograr esto en IE es establecer la posición relacionada con el tamaño de la fuente:

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

Al establecer el atributo "dy" se desplazará el texto hacia arriba (si el valor es negativo) o hacia abajo (si el valor es positivo). La configuración del atributo "anclaje de texto" centra el texto en el eje x muy bien en IE. A pesar de que esto podría ser un error, pero también lo es el soporte de IE para SVG!