Necesito para la salida de varias líneas de texto en formato SVG.
Por que estoy usando el siguiente esquema:

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

De primera y segunda línea de texto puede tener diferente número de caracteres, que puede cambiar de forma dinámica.
Quiero la segunda línea aparecen debajo de la primera línea de texto y en cada una de ellas centrada.

Puedo hacer la segunda línea aparecen debajo de la primera línea por la adición de dy="15" para el segundo <tspan>.

Puedo alinear el texto en cada individuo <tspan> mediante la adición de text-anchor="middle" a ella.

Pero cómo hacer relación centrada en la alineación de los <tspan>‘s?

Traté de usar x="0" para cada <tspan> pero al parecer no funciona, ya que cada <tspan> tiene diferentes anchura y la representación de texto en la línea más corta es desplazado a la izquierda.

Es allí una manera de alinear los centros de 2 <tspan>‘s de ancho diferente, utilizando sólo CSS y/o SVG.

  • «texto ancla=»middle»` ?
  • He añadido todos los atributos que se mencionó anteriormente y funciona: jsfiddle.net/helderdarocha/e4bAh
  • Verticalmente centro : alignment-baseline="middle" / Horizontal centro : text-anchor="middle"
InformationsquelleAutor BartoNaz | 2014-04-24

3 Comentarios

  1. 54

    Si agrega text-anchor="middle" a cada tspan usted será el centro de ellos (tienes que quitar el espacio entre la tspans así, de lo contrario el espacio adicional se considerará como parte de la primera línea y no será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

    • +1, ya que este responde a la multilínea parte de la pregunta usando dy como OP sugerido.
    • Muchas gracias. Este problema se ha resuelto. Curiosamente, el espacio era realmente el responsable de la desalineación de las líneas.
    • Creo que se le olvidó un punto: translate(100), donde 100 es la mitad de la anchura de la svg, hace que el punto de partida está en el centro tal que x="0" y text-anchor="middle" nos traen los textos centrados
  2. 37

    DEMO

    Alinear las líneas de texto hacia el centro en SVG

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

    text-anchor='middle' por medio de alinear.

    text-anchor='end' para alinear a la izquierda.

    Código de la demo:

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

    Leer más sobre el texto de anclaje de la propiedad aquí

    • Los dos tspan etiquetas aparecen realmente en la misma línea (y la demo no utilizar el código de ejemplo)…
    • Aunque la demo proporcionada no es realmente una respuesta directa a la pregunta, tuve que upvote porque la demo muestra el resto de las opciones para alinear el texto. +1 para que.
    • Respuesta actualizada con el código de la demo.
  3. 7

    Puntos clave para horizontalmente centrar el texto:

    1. x="50%"

    2. text-anchor='middle'

    En su caso, usted puede 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>
    • El punto clave es: svg no es css, no está centrado el texto dentro de una caja o algo, creo que de x="50%" como un cursor, x debe estar centrada, ŧext-anchor="middle" acaba de definir el texto origen (que serán colocados en x)

Dejar respuesta

Please enter your comment!
Please enter your name here