« Découvrir le SVG/Éléments graphiques » : différence entre les versions
Contenu supprimé Contenu ajouté
m →Cercles et ellipses : titre |
|||
Ligne 153 :
== Texte ==
Un texte est inclus entre des balises <code><text … > … </text></code>. Dans sa forme la plus simple, on écrit simplement
<source lang="xml">
<text y="1em">
Texte à écrire.
</text>
</source>
L'attribut <code>y="1em"</code> permet de s'assurer que le texte est écrit dans la zone affichée, sinon, il est écrit au dessus de la ligne ''y'' = 0 qui est le haut de la zone d'affichage.
Les attributs spécifiques de l'élément <code>text</code> sont :
* <code>x</code>, <code>y</code> : coordonnées à laquelle le texte est écrit ;
* <code>dx</code>, <code>dy</code> : décalages par rapport au « curseur » (pour <code>dx</code>) et à la ligne de base (pour <code>dy</code>) ;
* <code>rotate</code> : rotation des caractères (mais ils restent sur une ligne horizontale) ;
* <code>textLength</code> : indique la longueur que le texte doit occuper ; si l'on met cet attribut, alors le texte est étiré ou compressé pour que la ligne ait exactement cette longueur ;
* <code>lengthAdjust</code> : si l'on utilise l'attribut <code>textLength</code>, la valeur de cet attribut indique si seuls les espaces sont modifiés (valeur <code>spacing</code>) ou bien si les caractères sont également déformés (valeur <code>spacingAndGlyphs</code>).
Notes que les valeurs des attributs peuvent être des suites de valeurs. Par exemple
<source lang="xml">
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="10cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<desc>Un texte
</desc>
<text x="1ex" y="2em" dy="0 -0.5em 0.5em" rotate="0 0 45 0">
Bonjour
</text>
</svg>
</source>
affiche le mot « Bonjour » mais :
* la lettre « o » est élevée d'un demi cadratin (donc est en exposant), puisque le texte est décalé de {{unité|–0,5|em}} au deuxième caractère puis redécalé de {{unité|0,5|em}} au troisième ;
* la lettre « n » est tournée de 45° dans le sens des aiguilles d'une montre, puisque le texte est tourné de 45° au troisième caractère puis remis à 0 au quatrième.
HTML : <code><foreignObject … > <body … > … </body> </foreignObject></code>
| |||