5. Le texte

Eléments les plus importants pour SVG 1.0:

texte

Chaque élément ’text’ entraîne le rendu d’une seule chaîne de texte.
Un texte est un objet graphique comme un autre: On peut appliquer les fonctions de transformation de système de coordonnées, de peinture, de rognage et de masquage ainsi qu’un style CSS.

<text x="55" y="90"  style="stroke:#000099;fill:#000099;font-size:18;">

Par défaut un text est affiché sur une ligne, mais on peut aussi le rendre au long du contour d’un élément ’path’.

tspan

Pour afficher un texte sur plusieurs lignes, on doit pré-calculer les retours à la ligne et employer un seul élément ’text’ avec un ou plusieurs éléments enfants ’tspan’ et les valeurs adéquates pour les attributs x, y, dx et dy

 <text x="55" y="90"  style="stroke:#000099;fill:#000099;font-size:18;">

   Hello. Let’s show: <tspan
 x="55"
 dy="20"
> a blue rectangle that pops up and goes again</tspan>
 <tspan x="55" dy="40"
>and a yellow that slowly arrives and then stays!</tspan> </text>

Exemple 5-1: text, tspan et textPath

 <defs>

   <path id="MonTrace" d="M 100 200 C 200 100 300 0 400 100

    C 500 200 600 300 700 200 C 800 100 900 100 900 100" />

  </defs>

  <desc>Exemple toap02 - un ’tspan’ dans un ’textPath’</desc>

  <use xlink:href="#MonTrace" fill="none" stroke="red"  />

  <text font-family="Verdana" font-size="42.5" fill="blue" >

   <textPath xlink:href="#MonTrace">

En

    <tspan dy="-30" fill="red" > 
haut </tspan>

    <tspan dy="30"> 
, </tspan>

    puis en bas, et encore en haut

   </textPath>

  </text>

  <!-- Montre le contour du canvevas avec un élément ’rect’ -->

  <rect x="1" y="1" width="998" height="298"

   fill="none" stroke="blue" stroke-width="2" />

Rappel: en SVG 1.1 on peut faire beaucoup plus, par exemple remplir une zone définie par un contour graphique.