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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
|
---
title: Gradients SVG
slug: Web/SVG/Tutorial/Gradients
tags:
- SVG
- SVG:Tutoriel
translation_of: Web/SVG/Tutorial/Gradients
original_slug: Web/SVG/Tutoriel/Gradients
---
<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p>
<p>Probablement plus excitant qu'un simple remplissage et contour, est le fait de pouvoir créer et appliquer des dégradés comme remplissage ou contour.</p>
<p>Il y a deux types de dégradés: linéaire et radial. Les dégradés sont définis dans la section <code>defs</code> et non sur les formes elles-mêmes — cela favorise leur réusabilité. Vous <strong>devez</strong> donner au dégradé un attribut <code>id</code>; autrement, il ne pourra pas être utilisé par les autres éléments à l'intérieur du fichier SVG.</p>
<h2 id="SVGLinearGradient" name="SVGLinearGradient">Dégradé Linéaire</h2>
<p>Les dégradés linéaires (<em>linear gradient</em> en anglais) changent de couleur le long d'une ligne droite. Pour en insérer un, on crée un élément {{SVGElement('linearGradient')}} dans la section des définitions du fichier SVG.</p>
<h3 id="Exemple">Exemple</h3>
<p>Un exemple de dégradé linéaire appliqué à un élément <code><rect></code>:</p>
<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
<linearGradient id="Gradient2">
<stop class="stop1" offset="0%"/>
<stop class="stop2" offset="50%"/>
<stop class="stop3" offset="100%"/>
</linearGradient>
<style type="text/css"><![CDATA[
#rect1 { fill: url(#Gradient2); }
.stop1 { stop-color: red; }
.stop2 { stop-color: black; stop-opacity: 0; }
.stop3 { stop-color: blue; }
]]></style>
</defs>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" id="rect1" />
</svg></pre>
<p>{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}</p>
<h3 id="Définir_le_dégradé">Définir le dégradé</h3>
<p>À l'intérieur du dégradé, il y a divers noeuds {{SVGElement('stop')}}. Ces noeuds disent au dégradé quelles couleurs doivent être affichées à quelles positions, en spécifiant les attributs <code>offset</code> pour la position et <code>stop-color</code> pour la couleur. On peut également le définir avec CSS. Les deux méthodes ont été utilisées dans l'exemple pour le démontrer.</p>
<p>Dans cet exemple, on dit au dégradé de commencer en rouge, de passer au noir transparent au centre et de terminer par la couleur bleue. Vous pouvez ajouter autant de couleurs que vous le souhaitez, pour créer un dégradé aussi beau ou aussi laid que vous le souhaitez, mais les positions (<code>offset</code>) doivent toujours être incrementées de 0% (ou 0) à 100% (ou 1). Si des valeurs sont dupliquées, la couleur définie la plus en bas de la définition sera utilisée.</p>
<p>Aussi, comme pour le remplissage et le contour, vous pouvez spécifier un attribut <code>stop-opacity</code> pour définir l'opacité de la couleur à cette position (encore une fois, à partir de FF3 vous pouvez utiliser les valeurs rgba pour le même effet).</p>
<pre class="eval"> <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
</pre>
<h3 id="Utiliser_le_dégradé">Utiliser le dégradé</h3>
<p>Pour utiliser le dégradé, vous devez le référencer avec l'attribut <code>fill</code> ou <code>stroke</code> d'un objet. On référence un élément SVG de la même manière que l'on référence des éléments en CSS, via <code>url()</code>. Dans notre cas, l'url est juste une référence vers le dégradé avec l'ID "Gradient". Pour le référencer, on définit <code>fill="url(#Gradient)"</code>, et voilà! Notre objet est maintenant multi-coloré. Vous pouvez faire de même avec <code>stroke</code>.</p>
<h3 id="Orientation_du_dégradé">Orientation du dégradé</h3>
<p>L'élément <code><linearGradient></code> peut également prendre différents attributs pour spécifier la taille et l'apparence du dégradé. L'orientation du dégradé est contrôlé par deux points, désignés par les attributs <code>x1</code>, <code>x2</code>, <code>y1</code>, et <code>y2</code>. Ces attributs définissent la ligne le long de laquelle le dégradé est tracé. Par défaut, le dégradé est horizontal, mais il peut être orienté autrement grâce à ces attributs. "Gradient2" dans l'exemple précédent crée un dégradé vertical.</p>
<pre class="eval"> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
</pre>
<h3 id="xlinkhref">xlink:href</h3>
<p>Vous pouvez également utiliser l'attribut <code>xlink:href</code> sur les dégradés. Quand il est utilisé, les attributs et stops d'un dégradé peuvent être réutilisé sur un autre. Ainsi, dans l'exemple précédent, on aurait pu ne pas redéfinir tous les stops dans Gradient2, comme ceci:</p>
<pre class="eval"> <linearGradient id="Gradient1">
<stop id="stop1" offset="0%"/>
<stop id="stop2" offset="50%"/>
<stop id="stop3" offset="100%"/>
</linearGradient>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
xmlns:xlink="<a class="external" href="http://www.w3.org/1999/xlink" rel="freelink">http://www.w3.org/1999/xlink</a>" xlink:href="#Gradient1"/>
</pre>
<p>Ici, le namespace xlink est inclut directement sur le noeud, bien qu'il soit généralement définit en haut du document, comme dans l'<a href="/fr/docs/Web/SVG/Tutoriel/Contenu_embarque_SVG">exemple avec les images</a></p>
<h2 id="Radial_Gradient" name="Radial_Gradient">Dégradé Radial</h2>
<p>Les dégradés radiaux (<em>radial gradient</em> en anglais) sont similaires aux dégradés linéaires à la différence près qu'ils irradient autour d'un point. Pour en créer un, on crée un élément {{SVGElement('radialGradient')}} dans la section de définitions du document SVG.</p>
<h3 id="Exemple_2">Exemple</h3>
<pre class="brush: html"><svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="RadialGradient1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>
</svg></pre>
<p>{{ EmbedLiveSample('Exemple_2','120','240','/files/726/SVG_Radial_Gradient_Example.png') }}</p>
<h3 id="Définir_le_dégradé_2">Définir le dégradé</h3>
<p>Les stops utilisés ici sont les mêmes que précédemment, la différence étant que désormais l'objet sera rouge en son centre, et que la couleur changera progressivement vers le bleu en approchant des contours. Comme pour les dégradés linéaires, le noeud <code><radialGradient></code> peut prendre différents attributs pour décrire sa position et son orientation. Cependant, la définition est un peu plus complexe. Le dégradé linéaire est défini par deux points, qui déterminent où sont situé le centre et les bords:</p>
<ul>
<li>Le premier point définit le cercle où le dégradé se termine. Il requiert un point central, spécifié par les attributs <code>cx</code> et <code>cy</code>, et un rayon, <code>r</code>. Définir ces trois attributs vous permettra de déplacer le dégradé et de changer sa taille, comme illusté dans le deuxième <code>rect</code> de notre exemple.</li>
<li>Le second point est appelé le point focal et il est définit par les attributs <code>fx</code> et <code>fy</code>. Tandis que le premier point décrit où sont les bords du dégradé, le point focal décrit où est son centre. C'est plus facile à voir avec un exemple (voir la section qui suit).</li>
</ul>
<h3 id="Centre_et_point_focal">Centre et point focal</h3>
<pre class="brush: html"><svg width="120" height="120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="Gradient"
cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100"
fill="url(#Gradient)" stroke="black" stroke-width="2"/>
<circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
<circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
<circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
<text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
<text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
</svg></pre>
<p>{{ EmbedLiveSample('Centre_et_point_focal','120','120','/files/727/SVG_Radial_Grandient_Focus_Example.png') }}</p>
<p>Si le point focal est déplacé en dehors du cercle décrit précédemment, il est impossible que le dégradé s'affiche correctement, le point focal sera donc supposé être à l'intérieur du bord du cercle. Si le point focal n'est pas du tout indiqué, il sera supposé être au même endroit que le point central.</p>
<h2 id="Attributs_additionnels">Attributs additionnels</h2>
<p>Les dégradés linéaires et radiaux peuvent également prendre quelques autres attributs pour décrire les transformations qu'ils peuvent subir.</p>
<h3 id="spreadMethod">spreadMethod</h3>
<p>Cet attribut contrôle ce qu'il arrive quand le dégradé arrive à sa fin, mais que l'objet n'est pas encore rempli. Trois valeurs sont possibles: "pad", "reflect", ou "repeat".</p>
<ul>
<li>"<code>pad</code>" est la valeur par défaut. Quand un dégradé arrive à sa fin, la dernière couleur est utilisée pour remplir le reste de l'objet.</li>
<li>"<code>reflect</code>" a pour effet de poursuivre le dégradé, mais en sens inverse: de la dernière couleur (offset 100%) à la première (offset 0%), puis de nouveau de la première à la dernière, etc.</li>
<li>"<code>repeat</code>" poursuit également le dégradé, mais au lieu de revenir en arrière, il revient au début et est exécuté de nouveau.</li>
</ul>
<pre class="brush: html"><svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- pad -->
<radialGradient id="GradientPad"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="pad">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<!-- repeat -->
<radialGradient id="GradientRepeat"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="repeat">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
<!-- reflect -->
<radialGradient id="GradientReflect"
cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75"
spreadMethod="reflect">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"/>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"/>
<rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"/>
<text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
<text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
<text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
</svg></pre>
<p>{{ EmbedLiveSample('spreadMethod','220','220','/files/728/SVG_SpreadMethod_Example.png') }}</p>
<h3 id="gradientUnits">gradientUnits</h3>
<p>Les deux types de dégradés ont également un attribut <code>gradientUnits</code>, qui indique l'unité utilisée pour décrire la taille et l'orientation du dégradé. Deux valeurs sont posibles: <code>userSpaceOnUse</code> ou <code>objectBoundingBox</code>.</p>
<ul>
<li><code>objectBoundingBox</code> est la valeur par défaut, c'est ce qu'on a vu jusqu'à présent. Le dégradé est automatiquement redimensionné à la taille de l'objet sur lequel il est appliqué, vous n'avez donc qu'à spécifier les coordonnées de zéro à un (ou de 0% à 100%), et les coordonnées sont automatiquement redimensionnée à la taille de l'objet.</li>
<li><code>userSpaceOnUse</code> indique que les valeurs sont absolues. Vous devez donc savoir où se situe l'objet, et placer le dégradé à la même position. Le dégradé radial précédent devrait être ré-écrit comme suit:
<pre class="eval"><radialGradient id="Gradient"
cx="60" cy="60" r="50"
fx="35" fy="35"
gradientUnits="userSpaceOnUse">
</pre>
</li>
</ul>
<p>Il y a quelques subtilités concernant l'utilisation de <code>gradientUnits="objectBoundingBox"</code> quand les limites de l'objet ne sont pas carrées, mais elles sont assez complexes et nous attendrons quelqu'un de plus au courant pour les expliquer.</p>
<h3 id="gradientTransform">gradientTransform</h3>
<p>Vous pouvez également appliquer une transformation au gradient en utilisant l'attribut <code>gradientTransform</code>, mais puisque nous n'avons pas encore introduit les <a href="/fr/docs/Web/SVG/Tutoriel/Transformations_de_base" title="en-US/Web/SVG/Tutorial/Basic Transformations">transformations</a>, nous le laisserons de côté pour l'instant.</p>
<p> </p>
<p>{{ PreviousNext("Web/SVG/Tutoriel/Fills_and_Strokes", "Web/SVG/Tutoriel/Motifs") }}</p>
<p> </p>
|
