web-dev-qa-db-fra.com

Aligner les lignes de texte au centre de la SVG

J'ai besoin de sortir plusieurs lignes de texte en SVG. Pour cela j'utilise le schéma suivant:

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

La première et la deuxième ligne du texte peuvent avoir un nombre différent de caractères, qui peuvent changer dynamiquement. Je veux que la deuxième ligne apparaisse sous la première ligne et que le texte dans les deux soit centré.

Je peux faire apparaître la deuxième ligne sous la première ligne en ajoutant dy="15" pour le second <tspan>.

Je peux aligner le texte dans chaque individu <tspan> en ajoutant text-anchor="middle" à elle.

Mais comment faire l'alignement centrique relatif de ces <tspan>'s?

J'ai essayé d'utiliser x="0" pour chaque <tspan> mais apparemment cela ne fonctionne pas puisque chaque <tspan> a une largeur différente et le texte affiché dans la ligne la plus courte est décalé vers la gauche.

Est-il possible d'aligner les centres de 2 <tspan> de largeur différente en utilisant uniquement CSS et/ou SVG.

csstextsvgalignmenttspan
44
BartoNaz

Si vous ajoutez text-anchor="middle" à chaquetspan vous les centrez (vous devez supprimer l’espace entre les tspans également, sinon l’espace supplémentaire être considérés comme faisant partie de la première ligne et ils ne seront pas complètement centrés).

Par exemple:

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

Voir: JSFiddle

52
helderdarocha

DÉMO

enter image description here

text-anchor='start' pour aligner à droite.

text-anchor='middle' pour l'alignement moyen.

text-anchor='end' pour aligner à gauche.

Code de démo:

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

En savoir plus sur la propriété text-anchor ici

34
Imran Bughio

Points clés pour centrer horizontalement le texte:
1. x="50%"
2. text-anchor='middle'

Dans votre cas, vous pouvez écrire en tant que:

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