alineación vertical del elemento de texto en SVG

142

Digamos que tengo el archivo SVG:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

Quiero alinear de alguna manera la parte superior de ay b. En realidad, ¡quiero que mi posicionamiento esté de acuerdo con el en rooflinelugar de baseline!

svg vertical-alignment w3c SeMeKh
fuente
La única respuesta que funciona en IE: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Respuestas:

116

La alignment-baselinepropiedad 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 padre. Esta propiedad especifica qué línea base de este elemento se debe alinear con la línea base correspondiente del padre. Por ejemplo, esto permite que las líneas de base alfabéticas en el texto romano permanezcan alineadas en los cambios de tamaño de fuente. El valor predeterminado es la línea de base con el mismo nombre que el valor calculado de la propiedad de alineación de línea de base. 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 línea de base del objeto que se está alineando.

Fuente W3C

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

Simon West
fuente
No tuve suerte con eso. Podría dar un ejemplo?
SeMeKh
2
En mi opinión, la mejor respuesta, ya que respondió la mía sin tener que navegar a una página de muro de texto. Quería mostrar mi texto en y = 0, pero estaba fuera de la pantalla, así que usé una regla CSS "alineación- línea base: colgando ", e hizo exactamente lo que estaba buscando, texto en el punto más alto en el contenedor SVG, sin un solo píxel fuera de la pantalla.
R. Hill
1
@SeMeKh: Hmm, por cierto, funcionó para mí en Chromium, pero ahora acabo de verificar que lo mismo no funciona en Firefox. Por lo tanto, parece que esta propiedad no es compatible de manera consistente en todos los navegadores a partir de ahora.
R. Hill
2
@ R.Hill Aquí está el informe de errores para Firefox que se abrió hace más de 11 años bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: ¿Cuál es la diferencia entre 'medio' y 'central'?
mxmlnkn
9
Voté por error, y porque he cometido el mismo error antes, no puedo deshacerlo. ☹ alignment-baseline: centralhace no trabajo para el IVS en Firefox, y que parece ser por diseño. dominant-baseline: centralfunciona en todos los navegadores que he probado hasta ahora, como se indica en esta respuesta: stackoverflow.com/a/15997503/1450294
Michael Scheper
227

Según la especificación SVG, alignment-baselinesolo se aplica a<tspan> , <textPath>, <tref>y <altGlyph>. Tengo entendido que se utiliza para compensar a los del <text>objeto que se encuentra sobre ellos. Creo que lo que estás buscando es dominant-baseline.

Posibles valores de dominant-baseline son:

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

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

Toutankh
fuente
8
Esto solucionó mis problemas con Firefox (que no funcionaba con la propiedad "alineación-línea base"). La "línea de base dominante" funciona en Chrome y Firefox. ¡Gracias!
Mariano Desanze
55
Excepto que esto no funciona en ninguna versión de IE en este momento, por lo que desafortunadamente no es tan útil para muchas aplicaciones del mundo real.
Yona Appletree
3
Dado que IE no admite la línea de base dominante o la línea de base de alineación, puede verificar la compatibilidad de la función de esta manera element.hasAttribute('dominant-baseline'), y si devuelve falso, aplique dy=-0.4emcomo se describe en esta respuesta stackoverflow.com/a/29089222/2296470
Tigran
1
línea de base dominante: central trabajado en mi caso. ¡Gracias!
Liam Mitchell
1
Tenga en cuenta que la línea de base dominante no es compatible con IE10-12 y Edge16
japrescott
47

attr ("línea de base dominante", "central")

usuario1087079
fuente
1
Esto se alinea por el centro del carácter (tanto como los glifos de fuente juegan muy bien), no estoy seguro de cómo esta es una respuesta aquí a esta pregunta.
matanster
3
Este es el método d3 o jquery para asignar atributos
glifo
1
Esta solución coloca la línea de base en el centro vertical del texto. Entonces la coordenada y está en el centro vertical. Esta fue la respuesta que estaba buscando. Gracias.
Henry
1
El núcleo de la respuesta es correcto: establezca el atributo dominante-línea base en central, sin embargo, attr () no es una función nativa de JS y no hay ninguna explicación.
jave.web
30

Si está probando esto en IE, la línea 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":

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

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

whyoz
fuente
55
Gracias por tener la única respuesta que funciona en IE. Es una pena que tengamos que hacer esto, pero las otras respuestas me hicieron perder una cantidad significativa de tiempo haciendo que todo funcionara en Chrome / FF, y luego descubrí que no funciona en IE durante las pruebas del navegador.
Yona Appletree
Buena y simple decisión! Y debemos recordar eliminar el atributo "alineación-línea base" para omitir su influencia en la posición del texto en los navegadores que lo admiten.
YaTaras
7

Después de mirar la Recomendación SVG , he llegado a la comprensión de que las propiedades de la línea de base están destinadas a posicionar el texto en relación con otro texto, especialmente cuando se mezclan diferentes fuentes o idiomas. Si desea colocar el texto para que esté arriba, yentonces necesita usarlo dy = "y + the height of your text".

rjax
fuente
Aprecio el enlace a la especificación, algunas lecturas realmente útiles allí. No estaba al tanto de la "<list-of-lengths>"opción (vinculada) por ejemplo (permite la manipulación por personaje)
brichins