Tuto SVG 08 - Texte

Public visé: dev lambda.

Objectif

• Afficher du texte et le courber sur un chemin.

Références W3C

• SVG 2 - Text: https://www.w3.org/TR/SVG2/text.html

Exemple

<svg xmlns="http://www.w3.org/2000/svg" width="220" height="120" viewBox="0 0 220 120">
  <defs>
    <path id="arc" d="M20 80 Q110 10 200 80"/>
  </defs>
  <text x="20" y="30" font-size="14">Texte simple</text>
  <text font-size="14" fill="#3a6ea5">
    <textPath href="#arc">Texte sur un chemin</textPath>
  </text>
</svg>

tutos-svg-08-texte.svg

À retenir

• text se positionne avec x/y.
• tspan permet de gérer des retours ou des styles partiels.
• textPath suit un chemin défini dans defs.

Exercice

• Ajoute un tspan pour mettre un mot en gras.