justificar - centrar texto css vertical

Alinea las líneas de texto para centrar en SVG

Question

Necesito dar salida a varias líneas de texto en SVG. Para eso estoy usando el siguiente esquema:

<text>
  <tspan> First line </tspan>
  <tspan> Second line </tspan>
</text>

La primera y la segunda línea del texto pueden tener diferentes números de caracteres, que pueden cambiar dinámicamente. Quiero que la segunda línea aparezca debajo de la primera línea y que el texto en ambos esté centrado.

Puedo hacer que la segunda línea aparezca debajo de la primera línea al sumar dy="15" para la segunda <tspan> .

Puedo alinear el texto en cada individuo <tspan> agregando text-anchor="middle" a él.

Pero, ¿cómo hacer una alineación céntrica relativa de esos <tspan> ?

Intenté usar x="0" para cada <tspan> pero aparentemente no funciona, ya que cada <tspan> tiene un ancho diferente y el texto renderizado en la línea más corta se desplaza hacia la izquierda.

¿Hay alguna forma de alinear centros de 2 <tspan> de ancho diferente usando solo CSS y / o SVG?

Answer 1

Puntos clave para centrar horizontalmente el texto:
1. x="50%"
2. text-anchor=''middle''

En tu caso, puedes escribir como:

<svg style="width:100%">
  <text y="50">
    <tspan x="50%" text-anchor="middle"> First line </tspan>
    <tspan x="50%" dy="15" text-anchor="middle"> Second line </tspan>
  </text>
</svg>

Answer 2

Si agrega text-anchor="middle" a cada tspan , los centrará (también debe eliminar el espacio entre los tspans, de lo contrario, el espacio adicional se considerará como parte de la primera línea y no estarán completamente centrado).

Por ejemplo:

<svg>
    <text y="50" transform="translate(100)">
       <tspan x="0" text-anchor="middle">000012340000</tspan><tspan x="0" text-anchor="middle" dy="15">1234</tspan>
   </text>
</svg>

Ver: jsfiddle.net/helderdarocha/e4bAh

Answer 3

DEMO

text-anchor=''start'' para alinear a la derecha.

text-anchor=''middle'' para la alineación del medio.

text-anchor=''end'' para la alineación izquierda.

Código de demostración:

<svg width="100%" height="230" viewBox="0 0 120 230"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

    <!-- Materialisation of anchors -->
    <path d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110" stroke="grey" />


    <!-- Anchors in action -->
    <text text-anchor="start"
          x="60" y="40">This text will align right</text>

    <text text-anchor="middle"
          x="60" y="75">This text will align middle</text>

    <text text-anchor="end"
          x="60" y="110">This text will align left</text>

    <!-- Materialisation of anchors -->
    <circle cx="60" cy="40" r="3" fill="red" />
    <circle cx="60" cy="75" r="3" fill="red" />
    <circle cx="60" cy="110" r="3" fill="red" />

<style><![CDATA[
text{
    font: bold 15px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>

Lea más acerca de la propiedad de anclaje de texto here