Cómo centrar el texto SVG verticalmente en IE9

Question

Para alinear el texto verticalmente en SVG hay que usar el atributo dominant-baseline. Esto ya se ha discutido en SO (Aligning text in SVG) y es parte de the specification.

Mi problema es con IE9 que aparentemente does not support dominant-baseline y un montón de other things.

¿Tiene alguna idea sobre cómo aproximar 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 admite 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 truco gigante, pero podemos aproximarnos a la posición media vertical teniendo en cuenta el tamaño de la fuente.

La especificación define central así:

central de

Esto identifica una línea de base computarizada que está en el centro de la caja de EM.

Podemos tomar un EM box de tamaño de letra 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

Usted podría tratar de la línea de base de cambio 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> 

Firefox no parece apoyar la línea base de cambio de embargo, pero Webkit y Opera hacer.

Answer 3

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

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

se establece el atributo "dy" se desplazará el texto hacia arriba (si el valor es negativo) o hacia abajo (si el valor es positivo). Establecer el atributo "text-anchor" centra bien el texto en el eje x en IE. Aunque esto puede ser un hack, pero también lo es el soporte de IE para SVG.