1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
|
---
title: Textes
slug: Web/SVG/Tutorial/Texts
tags:
- SVG
- SVG:Tutoriel
translation_of: Web/SVG/Tutorial/Texts
original_slug: Web/SVG/Tutoriel/Texts
---
<div>
<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div>
<div> </div>
<p>Lorsqu'on parle de texte en SVG, on doit différencier deux choses pratiquement complètement séparées: 1. l'inclusion et l'affichage de texte dans une image, 2. les polices SVG. Un article séparé sera dédié aux polices SVG, celui-ci se concentrera uniquement sur le fait d'insérer du texte.</p>
<h2 id="Les_bases">Les bases</h2>
<p>Nous avons vu dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Premiers_pas">exemple de l'introduction</a> que l'élément <code>text</code> peut être utilisé pour mettre du texte dans des documents SVG:</p>
<pre class="brush:xml"><text x="10" y="10">Hello World!</text>
</pre>
<p>Les attributs <code>x</code> et <code>y</code> déterminent où le texte apparaîtra dans la fenêtre. L'attribut {{SVGAttr("text-anchor")}} spécifie l'alignement horizontal du texte (si ce point doit être le côté gauche, droit ou le centre du texte) et l'attribut {{SVGAttr("dominant-baseline")}} l'alignement vertical (si ce point est le haut, le bas ou le centre).</p>
<p>De même que les formes basiques, la couleur des éléments texte peut être modifié avec l'attribut <code>fill</code> pour le remplissage ou <code>stroke</code> pour le contour. Tout deux peuvent également faire référence à un dégradé ou motif, ce qui rend la coloration de texte SVG beaucoup plus puissante que CSS 2.1.</p>
<h2 id="Définir_la_police">Définir la police</h2>
<p>Une partie essentielle d'un texte est la police dans laquelle il est affiché. SVG offre un ensemble d'attributs pour spécifier la police, dont beaucoup sont similaires à leurs équivalents CSS. Chacune des propriétés suivantes peut être définie en tant qu'attribut ou via une déclaration CSS: {{SVGAttr("font-family")}}, {{SVGAttr("font-style")}}, {{SVGAttr("font-weight")}}, {{SVGAttr("font-variant")}}, {{SVGAttr("font-stretch")}}, {{SVGAttr("font-size")}}, {{SVGAttr("font-size-adjust")}}, {{SVGAttr("kerning")}}, {{SVGAttr("letter-spacing")}}, {{SVGAttr("word-spacing")}} et {{SVGAttr("text-decoration")}}.</p>
<h2 id="Autres_éléments_liés_au_texte">Autres éléments liés au texte</h2>
<h3 id="tspan">tspan</h3>
<p>Cet élément est utilisé pour baliser des sous-parties d'un texte. Il doit s'agit d'un enfant d'un élément <code>text</code> ou d'un autre élément <code>tspan</code>. Un cas typique consiste à écrire un mot d'une phrase en gras:</p>
</div>
<pre class="brush:xml"><text>
This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>
</pre>
<h4 id="exemple_jouable">Exemple jouable</h6>
<pre class="brush:html hidden"><svg width="350" height="60" xmlns="http://www.w3.org/2000/svg">
<text>
This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>
<style><![CDATA[
text{
dominant-baseline: hanging;
font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
</pre>
<p>{{ EmbedLiveSample('exemple_jouable', '100%', 100) }}</p>
<p>L'élément tspan peut prendre les attributs personnalisés suivants:</p>
<p><strong>x</strong><br>
Définit une nouvelle coordonnées absolue pour le texte qu'il contient. Cela écrase la position par défaut du texte. Cet attribut peut également contenir une liste de nombres, qui sont appliqués un par un à chaque caractère du tspan.</p>
<p><strong>dx</strong><br>
Définit un décalage horizontal relatif à la position par défaut du texte. Ici aussi, vous pouvez founir une liste de valeurs qui seront appliquées consécutivement à chaque caractère.</p>
<p><strong>y</strong> et <strong>dy</strong> sont utilisés de la même manière mais pour le déplacement vertical.</p>
<p><strong>rotate</strong><br>
Applique une rotation aux caractères, avec le nombre de degrés donné. Donner une liste de nombres aura pour effet d'appliquer une rotation à chaque caractère respectif, la dernière valeur sera appliquée aux caractères restants.</p>
<p><strong>textLength</strong><br>
Un attribut quelque peu obscur qui donne la longueur calculée de la chaîne. Il est destiné au moteur de rendu pour lui permettre d'affiner la position des glyphes, lorsque la longueur de texte mesurée ne correspond pas à celle qui est indiquée.</p>
<h3 id="tref">tref</h3>
<p>L'élément <code>tref</code> permet de référencer un texte déjà définit, et recopie le texte à sa place. Vous devez utiliser l'attribut <code>xlink:href</code> pour définir l'élément à copier. Vous pouvez ensuite styliser le texte et modifier son apparence indépendamment de la source.</p>
<pre class="brush:xml"><text id="example">This is an example text.</text>
<text>
<tref xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#example" />
</text>
</pre>
<h3 id="textPath">textPath</h3>
<p>Cet élément récupère via son attribut <code>xlink:href</code> un chemin arbitraire et aligne ses caractères le long de ce chemin:</p>
<pre class="brush:xml"><path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
A curve.
</textPath>
</text></pre>
<h4 id="code_jouable_2">Code jouable 2</h4>
<pre class="brush:html hidden"><svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
A curve.
</textPath>
</text>
<style><![CDATA[
text{
dominant-baseline: hanging;
font: 28px Verdana, Helvetica, Arial, sans-serif;
}
]]></style>
</svg>
</pre>
<p>{{ EmbedLiveSample('code_jouable_2', '100%', 100) }}</p>
<div>{{PreviousNext("Web/SVG/Tutoriel/Motifs", "Web/SVG/Tutoriel/Transformations_de_base")}}</div>
|
