texte
Canvas permet d'écrire du texte
Définition : Texte
Texte
x,y : coordonnées de départ
1
<svg width="300" height="200">
2
<text x="50" y="100">texte</text>
3
</svg>
SVG - Texte
Définition : La police
La police peut-être définie à l'aide d'attributs ou de css qui portent les mêmes noms
font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing et text-decoration
Définition : Décalage
dx, dy permettent de décaler les lettres selon l'abscisse et l'ordonnée
1
<svg width="300" height="200">
2
<text x="50" y="80" dx="10 20 30 30 50" dy="0 10 20 -10 -20 10" font-size="50">texte</text>
3
</svg>
SVG - Texte
Définition : Rotation
rotate permet d'appliquer une rotation aux lettres
1
<svg width="300" height="200">
2
<text x="50" y="80" rotate="10 20 30 30 50" font-size="50">texte</text>
3
</svg>
SVG - Texte
Définition : Chemin
textPath permet de suivre un chemin préalablement défini
1
<svg width="300" height="200">
2
<path id="chemin" d="M 20 80 C 100 200, 200 200, 300 20" fill="transparent" />
3
<text font-size="50">
4
<textPath href="#chemin">
5
texte texte texte
6
</textPath>
7
</text>
8
</svg>
SVG - Texte
Définition : Sous-partie
tspan permet de définir une sous-partie d'un texte
1
<svg width="300" height="200">
2
<text x="10" y="70" font-size="40">
3
texte <tspan fill="red">texte</tspan> texte
4
</text>
5
</svg>
SVG - Texte