texte

Canvas permet d'écrire du texte

DéfinitionTexte

Texte

x,y : coordonnées de départ

1
<svg width="300" height="200">
2
    <text x="50" y="100">texte</text>
3
</svg>
texte
SVG - Texte

DéfinitionLa 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éfinitionDé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>
texte
SVG - Texte

DéfinitionRotation

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>
texte
SVG - Texte

DéfinitionChemin

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>
texte texte texte
SVG - Texte

DéfinitionSous-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>
texte texte texte
SVG - Texte