oujood.com

Comment afficher un texte dans un graphique SVG

En svg l'élément text est utilisé pour afficher le texte dans un graphique. ...

chercher |

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="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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe
Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci




Hébergeur Discount - Hébergement web