Comment afficher un texte dans un graphique SVG

Somaire

chapitre précédent

sommaire

chapitre suivant

Afficher un texte dans un graphique


HTML5 cours tutorial SVG

la gestion du texte en SVG est simple parce que un glyphe (ou une lettre) est un objet graphique comme un autre/!
Et donc vous pouvez donner du styler au texte comme vous l'avez déja  fait avec les rectangle, cercle, polygone et autres formes SVG. Sachez aussi que l'élément <text> est utilisé pour défnir un texte en SVG.
Et . Voilà,  le chapitre est presque terminé¡
Il reste à savoir que vous pouvez aussi appliquer du css comme vous avez l'habitude de le faire avec les autres formes SVG.

Exemple 1 ɣrire un texte en SVG:

Voici le code SVG :

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="15" fill="#0000ff">I love SVG! Il est
fantastique!!!</text>
</svg>
</div>
</body>
</html>

Les attribut x et y sont les coordonn饳 du point o commence le texte.

Exemple 2 Faire pivoter le texte :

Voici le code SVG :

Sélectionner le code

<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="15" fill="#0000ff" transform="rotate(30
20,40)">I love SVG! Il peut faire une rotation du
texte</text>
</svg>
</div>
</body>
</html>

Exemple 3 Texte suivant un tracé 

Voici le code SVG :

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<svg viewBox="0 0 1200 700"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 200,20" />
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I! il peut
ecrire en suivant un tracé¡¡!</textPath>
</text>
</svg>
</div>
</body>
</html>

Exemple 4 Texte sur plusieurs lignes (avec l'鬩ment <tspan>) :

L'鬩ment <text> peut contenir dans n'importe quel nombre de sous-groupes avec l'鬩ment <tspan>.
Chaque 鬩ment <tspan> peut contenir diff鲥ntes mises en forme et position.
Voici le code SVG :

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<svg viewBox="0 0 1200 700"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="10" y="100" style="fill:red;">
<tspan x="10" y="45">Premiè²¥ ligne</tspan>
<tspan x="10" y="70">Seconde ligne</tspan>
</text>
</svg>
</div>
</body>
</html>

Exemple 5 Texte du lien (avec l'鬩ment <a>) :

Voici le code SVG :

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
</head>
<body>
<div>
<svg viewBox="0 0 1200 700"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<a xlink:href="http://www.oujood.com"
target="blank">
<text x="0" y="15" fill="red">Voici le texte du
lien</text>
</a>
</svg>
</div>
</body>
</html>

Exemple 6 styler le texte

Sélectionner le code


<!DOCTYPE html>
<html>
<head>
<title> SVG tracer des courbes</title>
<meta charset="UTF-8">
<style>
rect{
fill:pink;
stroke:black;
fill-opacity:0.3;
}
#ligne1{
font-size:18px;
text-decoration:underline;
}
#ligne2{
font-size:70px;
letter-spacing:-4px;
fill:linen;
fill-opacity:0.5;
stroke:lightsteelblue;
stroke-width:3px;
}
#ligne3{
font-size:100px;
font-weight:bold;
fill:gold;
stroke:blue;
stroke-opacity:0.5;
stroke-width:3px;
stroke-dasharray:10,5;
}
</style>
</head>
<body>
<svg viewBox="0 0 1200 600" xml:lang="fr"
xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Styler du texte simplement</title>
<!-- cadre -->
<rect x="0" y="0" width="600" height="350"/>
<text id="ligne1" x="20" y="20">Premiè²¥ ligne de texte en
SVG</text>
<text id="ligne2" x="2" y="100">Seconde
ligne</text>
<text id="ligne3" x="50" y="280">3iè­¥ ligne</text>
</svg>
</body>
</html>

 

chapitre précédent

sommaire

chapitre suivant

Par carabde 20 Avril 2014