Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Comme je vous l'ai dit, le SVG ne gère actuellement que le texte sur une ligne.
Voyons donc comment ajouter des lignes de texte dans nos documents !
Un texte simple
La balise à utiliser pour ajouter du texte est... <text> !
Code : XML1
2
3 | ...
<text>Du texte en SVG !</text>
...
|
Bien sûr, rien ne s'affiche car nous n'avons pas indiqué de position pour notre texte. C'est donc ce que nous allons faire, à l'aide des attributs
x et
y de la balise <text> :
Code : XML1
2
3 | ...
<text x="300" y="250">Du texte en SVG !</text>
...
|
Le point (
x,y) indique le point en bas à gauche de la première lettre du texte :
C'est tout ce que je vous montre au niveau SVG pour l'instant. Voyons maintenant tout plein de propriétés CSS pour colorier et styliser ce texte ma foi un peu fade !
La plupart de ces propriétés sont les mêmes qu'en xHTML, donc pas beaucoup de nouveautés pour les connaisseurs. Mais ne négligez pas cette partie, car il y a quand même quelques particularités !
Stylisons un peu ce texte !
Couleurs de trait et de remplissage
Ici, pas de changement : ce sont exactement les mêmes propriétés que pour toutes les autres formes en SVG.
fill : couleur de remplissage
stroke : couleur du trait
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;">Du texte en SVG !</text>
...
|
Ici, on ne peut quasiment pas voir la couleur de remplissage, car le texte est trop petit.
Voyons donc comment augmenter sa taille !
Taille du texte
Cela se fera grâce à la propriété
font-size.
On lui met une valeur en pixels, mais cette fois il faudra écrire "px" (pour
pi
xel) à la suite de la valeur numérique :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;">Du texte en SVG !</text>
...
|
Ce code fonctionne aussi sous IE sans le "px", mais Firefox, lui, ne reconnaît la propriété que si on indique bien que c'est une valeur en pixels.
Italique
On met un texte en italique avec la propriété
font-style.
Comme valeur, on spécifie soit
italic pour mettre le texte en italique, ou
normal, qui est la valeur par défaut (pas de mise en italique), pour contrer l'héritage.
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-style:italic;">Du texte en SVG !</text>
...
|
Graisse du texte
(j'adore cette expression ! 
)
Pour indiquer si un texte doit être mis en gras ou non, on utilisera la propriété
font-weight.
Encore une fois, deux valeurs possibles :
- bold : met le texte en gras ;
- normal (valeur par défaut) : pas de mise en gras (pour contrer l'héritage).
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-weight:bold;">Du texte en SVG !</text>
...
|
Bonjour, la police !
(ah le folklore québécois ! 
...)
(Ce titre ne parle qu'aux québécois ! 
)
Pour indiquer quelle police utiliser pour écrire un texte, c'est la propriété
font-family qui nous sera utile.
À l'intérieur de celle-ci, vous devez indiquer une liste de polices.
Si la personne qui visionne votre document n'a pas la première police, son navigateur essaiera la deuxième, s'il ne l'a pas non plus, il essaiera la troisième, si... (enfin bref, vous voyez le concept
).
On termine généralement la liste par le mot-clé
serif, qui signifie : "Si tu n'as aucune des polices précédentes, utilise une police standard."
Un exemple :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;">Du texte en SVG !</text>
...
|
Remarquez les apostrophes ('') autour de Trebuchet MS ; les noms de polices comportant des espaces doivent en être encadrés.
Petite info en + : contrairement au xHTML où l'on se sert plutôt des guillements ("") pour encadrer les noms de polices comportant des espaces, en SVG on utilise les apostrophes (''), car nous sommes déja dans l'attribut style, dont le contenu est délimité par des guillemets. Si on en ajoute d'autres autour de Trebuchet MS, il y aura erreur de syntaxe !
Mais le SVG fait mieux que le xHTML au moins sur un point : il permet d'incorporer nos propres polices ! (avec tout plein de jolis tracés !
)
Je vous parlerai peut-être des polices incorporées plus en détails dans un prochain chapitre.
Décoration du texte
En SVG, c'est la propriété
text-decoration qui permet de décorer le texte.
Elle peut prendre deux valeurs :
- none (par défaut) : aucune décoration ;
- underline : le texte est souligné ;
- line-through : le texte est barré ;
- overline : une ligne est dessinée au-dessus du texte.
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;text-decoration:overline;">Du texte en SVG !</text>
...
|
Note : cette propriété ne fonctionne pas du tout sous Firefox.
Alignement du texte
Par défaut, le point spécifié dans les attributs
x et
y de la balise <text> indique le point en bas à gauche de la première lettre du texte. Mais il est possible de changer cela, grâce à la propriété
text-anchor. Les valeurs possibles pour cette propriété sont :
- start (par défaut) : je viens de l'expliquer !
- middle : le point (x,y) correspond au point du milieu de la chaîne textuelle ;
- end : le point (x,y) désigne le point en bas à droite de la dernière lettre de la chaîne.
Voici quelques exemples, ainsi que leurs résultats :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;text-anchor:start;">Du texte en SVG !</text>
...
|
Résultat :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;text-anchor:middle;">Du texte en SVG !</text>
...
|
Résultat :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;text-anchor:end;">Du texte en SVG !</text>
...
|
Résultat :
Espacement des lettres et des mots
Pour changer l'espacement des mots et celui des lettres, on utilise respectivement les propriétés
word-spacing et
letter-spacing. Elles demandent toutes deux des valeurs en pixels :
Code : XML1
2
3 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;word-spacing:20;letter-spacing:5;">Du texte en SVG !</text>
...
|
Ici, les lettres seront espacées de 5 pixels et les mots de 20.
Firefox ne gère pas ces deux propriétés
Autres styles de trait
Toutes les propriétés que vous avez apprises dans le chapitre précédent peuvent aussi être utilisées sur du texte !
- stroke-width
- stroke-linejoin
- stroke-miterlimit
- stroke-dasharray
Exemple :
Code : XML1
2
3 | ...
<text x="50" y="250" style="fill:yellow;stroke:#abcdef;font-size:90px;stroke-width:5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:5,12;">Du texte en SVG !</text>
...
|
Résultat :
La balise <tspan>
Plusieurs lignes de texte !
Pour commencer cette partie, je vous montre l'astuce permettant de faire du texte sur plusieurs lignes.
Certains de vous diront sûrement :
Citation : Zéros qui ne pensent pas à la sémantique"Mais nous n'avons qu'à séparer notre texte en plusieurs balises <text>, que l'on positionne différemment à l'aide de leurs attributs x et y !"
Il est vrai que cette façon fonctionne, mais ce serait ne pas respecter la sémantique, car votre texte ne serait pas contenu entièrement dans la même balise.
C'est pourquoi il existe une balise <tspan> (t pour texte). C'est une balise fille de <text>. En fait,
elles ont exactement les mêmes attributs. Pratiquement, chaque ligne de votre texte sera incluse entre deux balises <tspan> et </tspan>, auxquelles vous attribuerez des attributs "
y" différents.
Exemple :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;">
Du texte en SVG !
<tspan x="300" y="280" style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
Et puis ce texte qui le suit,
</tspan>
<tspan x="300" y="310" style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
inclus dans des balises <tspan>,
</tspan>
<tspan x="300" y="340" style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
ce qui permet de faire plusieurs
</tspan>
<tspan x="300" y="370" style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
lignes de texte en respectant</tspan>
<tspan x="300" y="400" style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
la sémantique !
</tspan>
</text>
...
|
Analysons ce code depuis le début.
- D'abord la balise <text>, qui contient la première ligne de texte, avec son style.
- Ensuite, plusieurs balises <tspan> positionnées verticalement à 30 pixels l'une de l'autre, grâce à l'attribut y. Leur attribut style est identique.
- Finalement, la balise </text>, qui referme le tout !
Remarquez les code d'entités ASCII des caractères spéciaux (<, > et é, respectivement <,> et é). Comme lorsqu'on utilisait accesskey pour indiquer le début d'une animation, vous devez les utiliser si vous voulez écrire des caractères spéciaux dans vos balises de texte.
Remarquez aussi la lisibilité de mon code : je passe une ligne après chaque balise, et je vous recommande de le faire aussi, sinon vos codes deviendront bientôt complètement illisibles.
Mais il y a une petite chose que l'on pourrait améliorer pour rendre ce code encore plus lisible : chaque balise <tspan> a son propre attribut
style, mais ils sont tous identiques ; cela ajoute beaucoup de lourdeur au code.
Néanmoins, ces attributs sont nécessaires, car sans eux les différentes lignes de texte prendraient le style de leur balise parente <text>, conformément à l'héritage, ce qui ne produirait pas le résultat voulu.
Nous allons donc ajouter une aute balise <tspan>, englobant toutes les autres. Nous lui donnerons un attribut
style, et nous enlèverons tous les autres attributs
style des balise <tspan> de lignes.
En l'absence d'attribut
style, elles prendront le style de leur parente, qui ne sera pas en l'occurrence <text>, mais plutôt <tspan> :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;">
Du texte en SVG !
<tspan style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
<tspan x="300" y="280">
Et puis ce texte qui le suit,
</tspan>
<tspan x="300" y="310">
inclus dans des balises <tspan>,
</tspan>
<tspan x="300" y="340">
ce qui permet de faire plusieurs
</tspan>
<tspan x="300" y="370">
lignes de texte en respectant</tspan>
<tspan x="300" y="400">
la sémantique !
</tspan>
</tspan>
</text>
...
|
Mais il reste encore une dernière chose à améliorer avec ce code. En effet, on utilise des positions absolues pour indiquer les positions de chaque ligne. Si on change l'attribut
y de la première balise <text>, on n'aura plus les mêmes interlignes.
Pour remédier à cela, nous allons plutôt indiquer les positions des lignes en relatif, à l'aide de l'attribut
dy (pour
déplacement sur l'axe des
Y)de la balise <tspan>.
Celui-ci décale le texte de la ligne à laquelle il est attribué d'un certain nombre de pixels par rapport au dernier attribut
y ou
dy rencontré.
Pour notre exemple, cela donnerait :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | ...
<text x="300" y="250" style="fill:yellow;stroke:#abcdef;font-size:50px;font-family:'Trebuchet MS', Verdana, serif;">
Du texte en SVG !
<tspan style="fill:black;stroke:none;font-size:30px;font-family:'Trebuchet MS', Verdana, serif;">
<tspan x="300" dy="30">
Et puis ce texte qui le suit,
</tspan>
<tspan x="300" dy="30">
inclus dans des balises <tspan>,
</tspan>
<tspan x="300" dy="30">
ce qui permet de faire plusieurs
</tspan>
<tspan x="300" dy="30">
lignes de texte en respectant</tspan>
<tspan x="300" dy="30">
la sémantique !
</tspan>
</tspan>
</text>
...
|
L'attribut rotate
rotate est un attribut des balises <text> et <tspan>. Il sert à retourner chaque caractère individuellement (plutôt que toute la ligne de texte grâce à l'attribut transform).
Vous lui fournissez une liste de valeurs séparées par des virgules. Le premier nombre correspond à l'angle de rotation du premier caractère, le deuxième nombre à celui du deuxième caractère, etc.
Grâce à lui, on peut faire des effets sympa, comme ceci :
Code : XML1
2
3
4
5 | ...
<text x="370" y="300" rotate="-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10,-10,10" style="stroke:red;fill-opacity:0.7;fill:#27D210;font-size:40px;stroke-width:1;letter-spacing:3px;text-anchor:middle;">
Un texte retourné de tous côtés !
</text>
...
|
Résultat :
L'attribut rotate n'est pas reconnu par Firefox.
La balise <tref />
Cette balise, fille de <text>, vous servira lorsque vous aurez à utiliser plusieurs fois le même texte dans un document.
Vous placerez ce texte dans une balise <text>, que vous inclurez dans <defs> et à laquelle vous affecterez un id.
Puis, lorsque vous voudrez afficher ce texte à l'écran, vous créerez une balise <text>, que vous positionnerez où vous le voudrez, et que vous styliserez à votre gré (ah ! le poète en moi
).
C'est à l'intérieur de cette balise <text> que vous placerez une balise <tref /> (pour
text
reference, référence textuelle en anglais), qui appellera votre texte placé dans <defs> à l'aide de l'attribut
xlink:href.
(Eh oui, il faudra rajouter le namespace d'XLink dans la balise <svg> externe.
Je vous recommande d'ailleurs de le faire pour tous vos documents à partir de maintenant.)
Voici un exemple (je ne vous mets pas la balise <svg>, mais n'oubliez pas d'y inclure un attribut
xmlns supplémentaire pour XLink):
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 | ...
<defs>
<text id="texte_repete">Texte répété plusieurs fois</text>
</defs>
<text x="50" y="50" style="fill:blue;stroke:yellow;stroke-width:0.6;font-size:20px;">
<tref xlink:href="#texte_repete" />
</text>
<text x="220" y="300" style="fill:blue;stroke:yellow;stroke-width:0.6;font-size:20px;">
<tref xlink:href="#texte_repete" />
</text>
<text x="280" y="120" style="fill:blue;stroke:yellow;stroke-width:0.6;font-size:20px;">
<tref xlink:href="#texte_repete" />
</text>
<text x="320" y="410" style="fill:blue;stroke:yellow;stroke-width:0.6;font-size:20px;">
<tref xlink:href="#texte_repete" />
</text>
...
|
Ne paniquez pas si ce code n'affiche rien sous Firefox, car la balise <tref> n'est pas reconnu par celui-ci.
La balise <textPath>
Jusqu'à maintenant, nos lignes de texte étaient droites. Mais il est aussi possible qu'elles suivent un tracé, et donc de les courber, grâce à <textPath>, une balise fille de <text>.
Pour ce faire, nous inclurons dans <defs> le tracé (balise <path />), avec un id.
Ensuite, nous mettrons une balise <text>, hors de <defs>. Cette balise <text> contiendra une balise <textPath>, qui appellera le tracé à l'aide d'
xlink:href. C'est donc à l'intérieur de <textPath> que vous écrirez votre texte.
Attention : la balise <text> contenant <textPath> n'a pas à avoir d'attributs x et y, car la chaîne de texte commencera toujours au point indiqué par le premier moveto du tracé inclus dans <defs>.
Un exemple complet :
Code : XML1
2
3
4
5
6
7
8
9 | ...
<defs>
<path id="trace_ondule" d="M70,230 c150,-50 100,200 200,200 s0,-300 400,-200" />
</defs>
<text style="fill:#FF9844;stroke:#2742EB;stroke-width:1;font-size:30px;">
<textPath xlink:href="#trace_ondule">Un texte qui ondule le long d'un tracé, pour ensuite y remonter...</textPath>
</text>
...
|
Comme vous le voyez, la balise <text> n'a pas d'attribut de positionnement. La ligne de texte commence au point (70,230), qui est indiqué dans le premier
moveto de
trace_ondule.
La propriété text-align n'a aucun effet sur <textPath>.
Plusieurs balises combinées !
Notez que nous pouvons toujours combiner ce que nous apprenons.
Par exemple, on pourrait insérer une balise <tref /> à l'intérieur de <textPath>. À ce moment-là, ce serait le texte contenu dans <defs> qui se dessinerait le long du tracé.
Code : XML 1
2
3
4
5
6
7
8
9
10 | ...
<defs>
<path id="trace_ondule" d="M70,230 c150,-50 100,200 200,200 s0,-300 400,-200" />
<text id="texte_ondule">Un texte qui ondule le long d'un tracé, pour ensuite y remonter...</text>
</defs>
<text style="fill:#FF9844;stroke:#2742EB;stroke-width:1;font-size:30px;">
<textPath xlink:href="#trace_ondule"><tref xlink:href="#texte_ondule" /></textPath>
</text>
...
|
Et voilà ! Maintenant vous savez ajouter du texte dans des fichiers SVG et le styliser !
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
, 
148 Zéros connectés |
8 requêtes |
0.022s (0.0109s)
