Transforme un texte anglais en timestamp
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.
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.
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>
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>
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>
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>
<!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
SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent