• Précédent
• Suivant

Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.

Les bases

Nous avons vu dans l'exemple de l'introduction que l'élémenttext peut être utilisé pour mettre du texte dans des documents SVG:

<text x="10" y="10">Hello World!</text>

Les attributsx ety déterminent où le texte apparaîtra dans la fenêtre. L'attributtext-anchor spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attributdominant-baseline l'alignement vertical (si ce point est le haut, le bas ou le centre).

De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attributfill pour le remplissage oustroke pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.

Définir la police

Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS:font-family,font-style,font-weight,font-variant,font-stretch,font-size,font-size-adjust,kerning,letter-spacing,word-spacing ettext-decoration.

Autres éléments liés au texte

tspan

Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élémenttext ou d'un autre élémenttspan. Un cas typique consiste à écrire un mot d'une phrase en gras:

<text>  This is <tspan font-weight="bold" fill="red">bold and red</tspan></text>

Exemple jouable

<svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">  <text>    This is    <tspan font-weight="bold" fill="red">bold and red</tspan>  </text>  <style>    <![CDATA[      text{        dominant-baseline: hanging;        font: 28px Verdana, Helvetica, Arial, sans-serif;      }    ]]>  </style></svg>

L'élément tspan peut prendre les attributs personnalisés suivants:

xDéfinit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.

dxDéfinit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.

y etdy sont utilisés de la même manière mais pour le déplacement vertical.

rotateApplique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.

textLengthUn attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.

tref

L'élémenttref permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attributxlink:href pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.

<text>This is an example text.</text><text>    <tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" /></text>

textPath

Cet élément récupère via son attributxlink:href un chemin arbitraire et aligne ses caractères le long de ce chemin:

<path d="M 20,20 C 80,60 100,40 120,20" fill="transparent" /><text>  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">    A curve.  </textPath></text>

Code jouable 2

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">  <path d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />  <text>    <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">      A curve.    </textPath>  </text>  <style>    <![CDATA[      text{        dominant-baseline: hanging;        font: 28px Verdana, Helvetica, Arial, sans-serif;      }    ]]>  </style></svg>

• Précédent
• Suivant