alineación vertical del elemento de texto en SVG

Digamos que tengo el archivo SVG:

 b a  

Quiero alinear de alguna manera la parte superior de a y b . De hecho, ¡quiero que mi posicionamiento esté de acuerdo con la roofline del roofline lugar de la baseline de baseline !

La propiedad alignment-baseline es lo que está buscando, puede tomar los siguientes valores

 auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit 

Descripción de w3c

Esta propiedad especifica cómo se alinea un objeto con respecto a su elemento primario. Esta propiedad especifica qué línea de base de este elemento se alineará con la línea de base correspondiente del elemento primario. Por ejemplo, esto permite que las líneas de base alfabéticas en el texto romano se mantengan alineadas a lo largo de los cambios de tamaño de fuente. Se establece de manera predeterminada en la línea de base con el mismo nombre que el valor calculado de la propiedad de línea base de alineación. Es decir, la posición del punto de alineación “ideográfica” en la dirección de progresión del bloque es la posición de la línea de base “ideográfica” en la tabla de referencia del objeto que se está alineando.

Fuente W3C

Desafortunadamente, aunque esta es la forma “correcta” de lograr lo que buscamos, parece que Firefox no ha implementado muchos de los atributos de presentación para el Módulo de texto SVG ( Documentación MDN “SVG in Firefox” )

Según las especificaciones de SVG, alignment-baseline solo se aplica a , , y . Según entiendo, se usa para compensar los del objeto que están encima de ellos. Creo que lo que estás buscando es dominant-baseline .

Los valores posibles de dominant-baseline son:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Consulte la recomendación del W3C para la propiedad de línea de base dominante para obtener más información sobre cada valor posible.

attr (“línea de base dominante”, “central”)

Si está probando esto en IE, la línea de base dominante y la línea base de alineación no son compatibles.

La forma más efectiva de centrar texto en IE es usar algo como esto con “dy”:

  Ya Text  

El valor negativo lo desplazará hacia arriba y un valor positivo de dy lo desplazará hacia abajo. He encontrado que usar -.4em parece estar un poco más centrado verticalmente para mí que -.5 em, pero tú serás el juez de eso.

Después de consultar la Recomendación SVG , he llegado al acuerdo de que las propiedades de la línea de base están destinadas a colocar el texto en relación con otro texto, especialmente cuando se mezclan fonts o idiomas diferentes. Si desea colocar texto para que su parte superior esté en y entonces necesita usar dy = "y + the height of your text" .