doc-svg/texte/index.md

layout, title, date

layout	title	date
layouts/page.njk	Texte	Last Modified

Le texte est géré entièrment par l'utilisateur. il n'y a pas de retour à la ligne automatique ni de calcul d'espacement entre les lignes.

Les balise tspan permettent de spécifier une nouvelle position ou des nouveaux attributs pour la partie de texte concernée. Si l'abscisse x n'est pas renseignée alors le texte continue là où il devrait être.

<text>
  <tspan y="30">Bonjour</tspan>
  <tspan y="60">Tout le monde</tspan>
</text>

Alignement

La propriété text-anchor permet d'aligné le texte.

<text y="20" x="100" font-size="22" text-anchor="start">Bonjour</text>
<text y="50" x="100" font-size="22" text-anchor="middle">Bonjour</text>
<text y="80" x="100" font-size="22" text-anchor="end">Bonjour</text>

Les autres propriété pour la mise en forme sont identique au CSS/HTML

Texte sur un chemin

La balise textPath prend comme référence href un chemin visible ou non et permet d'écir le long de celui-ci

<path id="chemin" fill="none" stroke="#3ed124"
    d="m 13.176044,90.907441 ..." />
<text>
  <textPath href="#chemin">
    Les coïncidences, me répondit mon ami, sont les pires ennemies de la vérité..
  </textPath>
</text>

Texte libre

la balise foreignObject permet d'inclure un autre document xml à l'intérieur du SVG. En l'occurence ici de l'HTML. Nous retrouvons le fonctionnement normal d'un paragraphe de texte html.

Il est également possible d'utiliser les balises input des formulaires.

Je me trouvais ici. Vers onze heures, après avoir procédé, sur les fourneaux du laboratoire, à une courte expérience de chimie, j’avais fait glisser mon bureau jusqu’ici, car le père Jacques, qui passa la soirée à nettoyer quelques-uns de mes appareils, avait besoin de toute la place qui se trouvait derrière moi. Ma fille travaillait au même bureau que moi.

<foreignObject x="20" y="20" width="400" height="200">
  <p>Je me trouvais ... </p>
  <form>
  <input type="text">
</foreignObject>