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 :
<!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="https://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>
Par carabde 20 Avril 2014
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
