-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path10-introduction-a-svg.html
406 lines (284 loc) · 31.6 KB
/
10-introduction-a-svg.html
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
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>10 - Introduction à SVG</title>
<meta name="description" content="Traduction des tutoriels de Scott Murray sur D3.js.
">
<link rel="stylesheet" href="/scottmurray-d3-fr/css/main.css">
<link rel="stylesheet" href="/scottmurray-d3-fr/css/highlight.css">
<link rel="canonical" href="http://kaisersly.github.io/scottmurray-d3-fr/10-introduction-a-svg.html">
</head>
<body>
<div class="container">
<header class="site-header">
<div class="wrapper">
<h2><a class="site-title" href="/scottmurray-d3-fr/">Traduction des tutoriels de Scott Murray sur D3.js</a></h2>
</div>
</header>
<div>
<div class="col-md-12">
<ul class="pager">
<li class="previous">
<a href="/scottmurray-d3-fr/9-la-puissance-de-data.html" class="previous">← 9 - La puissance de data()</a>
</li>
<li class="next">
<a href="/scottmurray-d3-fr/11-dessiner-des-svgs.html" class="next">11 - Dessiner des SVGs →</a>
</li>
</ul>
</div>
<div class="col-md-offset-3 col-md-6">
<header>
<h1>10 - Introduction à SVG</h1>
</header>
<article>
<hr />
<p><em>Lien vers le tutoriel original : <a href="http://alignedleft.com/tutorials/d3/an-svg-primer">http://alignedleft.com/tutorials/d3/an-svg-primer</a></em>
²
———-</p>
<h2 id="introduction--svg">Introduction à SVG</h2>
<p><em>Dernière mise à jour le 20 mai 2014</em></p>
<p>D3 se montre vraiment utile lorsqu’il s’agit de manipuler des graphiques vectoriels SVG. Dessiner avec des <strong>div</strong>s et d’autres éléments natifs HTML est possible, mais un peu maladroit et sujet aux incohérences habituelles entre différents navigateurs. Utiliser SVG est plus fiable, visuellement cohérent, et plus rapide.</p>
<p>Des logiciels de dessin vectoriels comme Illustrator peuvent être utilisés pour générer des fichiers SVG, mais nous devons apprendre à les générer avec du code.</p>
<h3 id="llment-svg">L’élément SVG</h3>
<p>Scalable Vector Graphics (<em>SVG, ou graphique vectoriel adaptable, selon <a href="http://fr.wikipedia.org/wiki/Scalable_Vector_Graphics">Wikipédia</a></em>) est un format d’image basé sur du texte. Chaque image SVG est définie en utilisant un langage balisé similaire à HTML. Le code SVG peut être inclus directement dans un document HTML. Chaque navigateur supporte SVG <em>à l’exception d’</em> <a href="http://caniuse.com/#feat=svg">Internet Explorer versions 8 et plus anciennes</a>. SVG est basé sur XML, donc vous verrez que les éléments qui n’ont pas de balises fermantes doivent être auto-fermant. Par exemple :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><element></element></span> <span class="c"><!-- Utilise une balise fermante --></span>
<span class="nt"><element/></span> <span class="c"><!-- Balise auto-fermante --></span></code></pre></div>
<p>Avant de pouvoir dessiner quoi que ce soit, vous devez créer un élément SVG. Pensez à l’élément SVG comme à un canevas (<em>ou une toile, en anglais : canvas</em>) sur lequel nos visuels vont être dessinés. (À cet égard, SVG est conceptuellement similaire à l’élément HTML canvas.) Au minimum, il est bon de spécifier les valeurs de largeur <strong>width</strong> et de longueur <strong>height</strong>. Si vous ne les spécifiez pas, SVG prendra autant de place qu’il pourra dans l’élément qui le contient.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><svg</span> <span class="na">width=</span><span class="s">"500"</span> <span class="na">height=</span><span class="s">"50"</span><span class="nt">></span>
<span class="nt"></svg></span></code></pre></div>
<p>Voilà le SVG généré par ce code :</p>
<svg width="500" height="50">
</svg>
<p>Vous le voyez pas ? Cliquez-droit sur l’espace vide au-dessus et choisissez “Right-click on the empty space above and choose “Inspecter l’élément”. Votre inspecteur web devrait ressembler à ça :</p>
<p><img src="http://alignedleft.com/content/03-tutorials/01-d3/100-an-svg-primer/1.png" alt="Inspection d'un SVG vide" /></p>
<p>Notez qu’il y a un élément <strong>svg</strong> (ouais !), et qu’il occupe 500 pixels en horizontal et 50 pixels en vertical. C’est juste qu’il a pas l’air de grand chose, pour l’instant (ouh !).</p>
<p>Notez également que le navigateur assume que l’unité de mesure par défaut est le pixel. On a spécifié des dimensions de <strong>500</strong> et <strong>50</strong>, pas <strong>500px</strong> et <strong>50px</strong>. On aurait pu spécifier <strong>px</strong> de manière explicite, ou n’importe quel nombre dans les unités supportées, qui comprennent notamment <strong>em</strong>, <strong>pt</strong>, <strong>in</strong>, <strong>cm</strong>, et <strong>mm</strong>.</p>
<h3 id="formes-simples">Formes simples</h3>
<p>Il existe un certain nombre d’éléments visuels que vous pouvez inclure entre ces balises <strong>svg</strong>, par exemple <strong>rect</strong>, <strong>circle</strong>, <strong>ellipse</strong>, <strong>line</strong>, <strong>text</strong>, et <strong>path</strong>.</p>
<p>Si vous êtes familiés avec la programmation de visuels sur ordinateur, vous reconnaîtrez le système usuel de coordonnées basé sur le pixel, dans lequel <strong>0,0</strong> correspond au coin en haut à gauche du canevas. En augmentant la valeur <strong>x</strong> on va vers la droite, tandis qu’en augmentant la valeur <strong>y</strong> on va vers le bas.</p>
<svg width="505" height="65">
<line x1="5" y1="5" x2="5" y2="50" stroke="gray" stroke-width="1"></line>
<line x1="5" y1="50" x2="0" y2="45" stroke="gray" stroke-width="1"></line>
<line x1="5" y1="50" x2="10" y2="45" stroke="gray" stroke-width="1"></line>
<line x1="5" y1="5" x2="500" y2="5" stroke="gray" stroke-width="1"></line>
<line x1="500" y1="5" x2="495" y2="0" stroke="gray" stroke-width="1"></line>
<line x1="500" y1="5" x2="495" y2="10" stroke="gray" stroke-width="1"></line>
<circle cx="5" cy="5" r="3" fill="#008"></circle>
<text x="10" y="20">0,0</text>
<circle cx="105" cy="25" r="3" fill="#008"></circle>
<text x="110" y="40">100,20</text>
<circle cx="205" cy="45" r="3" fill="#008"></circle>
<text x="210" y="60">200,40</text>
</svg>
<p><strong>rect</strong> dessine un rectangle. Utilisez <strong>x</strong> et <strong>y</strong> pour spécifier les coordonnées du coin haut-gauche, et <strong>width</strong> et <strong>height</strong> pour spécifier ses dimensions (<em>respectivement largeur et hauteur</em>). Ce rectangle remplit l’espace de notre SVG :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><rect</span> <span class="na">x=</span><span class="s">"0"</span> <span class="na">y=</span><span class="s">"0"</span> <span class="na">width=</span><span class="s">"500"</span> <span class="na">height=</span><span class="s">"50"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<rect x="0" y="0" width="500" height="50"></rect>
</svg>
<p><strong>circle</strong> dessine un cercle. Utilisez <strong>cx</strong> et <strong>cy</strong> pour spécifier les coordonnées de son centre, et <strong>r</strong> pour spécifier son rayon. Ce cercle est centré au milieu de notre SVG large de 500 pixels, car sa coordonée <strong>cx</strong> (“centre-x”) est 250.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"250"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"25"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="250" cy="25" r="25"></circle>
</svg>
<p><strong>ellipse</strong> est similaire, mais requiert deux valeurs de rayon pour chaque axe. À la place de <strong>r</strong>, utilisez <strong>rx</strong> et <strong>ry</strong>.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><ellipse</span> <span class="na">cx=</span><span class="s">"250"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">rx=</span><span class="s">"100"</span> <span class="na">ry=</span><span class="s">"25"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<ellipse cx="250" cy="25" rx="100" ry="25"></ellipse>
</svg>
<p><strong>line</strong> dessine une ligne. Utilisez <strong>x1</strong> et <strong>y1</strong> pour spécifier les coordonnées d’un bout de la ligne, et <strong>x2</strong> et <strong>y2</strong> pour l’autre bout. Une couleur de trait <strong>stroke</strong> doit être spécifiée pour que la ligne soit visible.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><line</span> <span class="na">x1=</span><span class="s">"0"</span> <span class="na">y1=</span><span class="s">"0"</span> <span class="na">x2=</span><span class="s">"500"</span> <span class="na">y2=</span><span class="s">"50"</span> <span class="na">stroke=</span><span class="s">"black"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<line x1="0" y1="0" x2="500" y2="50" stroke="black"></line>
</svg>
<p><strong>text</strong> dessine un texte. Utilisez <strong>x</strong> pour spécifier la position du bord gauche, et <strong>y</strong> pour spécifier la position verticale de la ligne de base (<em>baseline</em>).</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><text</span> <span class="na">x=</span><span class="s">"250"</span> <span class="na">y=</span><span class="s">"25"</span><span class="nt">></span>Trop facile<span class="nt"></text></span></code></pre></div>
<svg width="500" height="50">
<text x="250" y="25">Trop facile</text>
</svg>
<p><strong>text</strong> héritera des styles CSS de fonte de son élément parent à moins que l’on ne spécifie autre chose. (On s’étendra plus sur la manière de formater le texte dans un instant.) Notez comment le style du texte ci-dessus correspond à celui de ce paragraphe. On pourrait écraser ce format comme cela :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><text</span> <span class="na">x=</span><span class="s">"250"</span> <span class="na">y=</span><span class="s">"25"</span> <span class="na">font-family=</span><span class="s">"sans-serif"</span>
<span class="na">font-size=</span><span class="s">"25"</span> <span class="na">fill=</span><span class="s">"gray"</span><span class="nt">></span>Trop facile<span class="nt"></text></span></code></pre></div>
<svg width="500" height="50">
<text x="250" y="25" font-family="sans-serif" font-size="25" fill="gray">Trop facile</text>
</svg>
<p>Notez également que lorsqu’un élément visuel s’étale au-dela d’un bord du SVG, il est coupé. Faites attention, lorsque vous utilisez <strong>text</strong>, que vos descendeurs (<em>les parties d’un caractère qui dépassent</em>) ne soient pas coupés (ouille !). Vous pouvez voir ce que ça se produit lorsqu’on place la ligne de base (<strong>y</strong>) à 50, la même que la hauteur de notre SVG :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><text</span> <span class="na">x=</span><span class="s">"250"</span> <span class="na">y=</span><span class="s">"50"</span> <span class="na">font-family=</span><span class="s">"sans-serif"</span>
<span class="na">font-size=</span><span class="s">"25"</span> <span class="na">fill=</span><span class="s">"gray"</span><span class="nt">></span>Trop facile<span class="nt"></text></span></code></pre></div>
<svg width="500" height="50">
<text x="250" y="50" font-family="sans-serif" font-size="25" fill="gray">Trop facile</text>
</svg>
<p><strong>path</strong> permet de dessiner des formes plus complexes que celles au-dessus (comme les frontières d’un pays dans les cartes (<em>geomaps</em>)), et sera expliqué séparément. Pour l’instant, on travaillera avec des formes simples.</p>
<h3 id="styliser-les-lments-svg">Styliser les éléments SVG</h3>
<p>Le style par défaut de SVG est un remplissage noir sans contour. Si vous voulez quoi que ce soit d’autre, vous devrez appliquer un style à vos éléments. Les propriétés SVG les plus courantes sont :</p>
<ul>
<li>
<p><strong>fill</strong> — Le remplissage, une valeur de couleur. Comme avec CSS, les couleurs peuvent être spécifiées comme suit</p>
<ul>
<li>couleurs nommées — <strong>orange</strong></li>
<li>valeurs hexadécimales — <strong>#3388aa</strong> ou <strong>#38a</strong></li>
<li>valeurs RGB — <strong>rgb(10, 150, 20)</strong></li>
<li>valeurs RGB avec transparence alpha — <strong>rgba(10, 150, 20, 0.5)</strong></li>
</ul>
</li>
<li><strong>stroke</strong> — Le trait (ou contour), une valeur de couleur.</li>
<li><strong>stroke-width</strong> — La largeur du trait, une valeur numérique de mesure (typiquement en pixels).</li>
<li><strong>opacity</strong> — L’opacité, une valeur numérique comprise entre 0.0 (complètement transparent) et 1.0 (complètement opaque).</li>
</ul>
<p>Avec <strong>text</strong>, vous pouvez aussi utiliser ces propriétés, qui fonctionnent comme avec CSS :</p>
<ul>
<li><strong>font-family</strong></li>
<li><strong>font-size</strong></li>
</ul>
<p>Comme avec CSS, il y a deux moyens d’appliquer un style à un élément SVG : soit directement en ligne (<em>inline</em>) comme un attribut de l’élément, soit avec une règle CSS.</p>
<p>Voilà quelques propriétés de style appliquées directement sur un cercle <strong>circle</strong> comme attributs :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"22"</span>
<span class="na">fill=</span><span class="s">"yellow"</span> <span class="na">stroke=</span><span class="s">"orange"</span> <span class="na">stroke-width=</span><span class="s">"5"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="25" cy="25" r="22" fill="yellow" stroke="orange" stroke-width="5"></circle>
</svg>
<p>Alternativement, on pourrait enlever tous les attributs de style, et assigner une classe à <strong>circle</strong> (comme si c’était un élément HTML normal)</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"22"</span> <span class="na">class=</span><span class="s">"pumpkin"</span><span class="nt">/></span></code></pre></div>
<p>et mettre les règles <strong>fill</strong>, <strong>stroke</strong>, et <strong>stroke-width</strong> dans un style CSS qui ciblerait une nouvelle classe :</p>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nc">.pumpkin</span> <span class="p">{</span>
<span class="py">fill</span><span class="p">:</span> <span class="no">yellow</span><span class="p">;</span>
<span class="py">stroke</span><span class="p">:</span> <span class="no">orange</span><span class="p">;</span>
<span class="py">stroke-width</span><span class="p">:</span> <span class="m">5</span><span class="p">;</span>
<span class="p">}</span></code></pre></div>
<p>L’approche CSS à des avantages évidents :</p>
<ol>
<li>Vous pouvez spécifier un style une fois et l’appliquer à plusieurs éléments.</li>
<li>Le code CSS est généralement plus facile à lire que les attributs en ligne.</li>
<li>Pour ces raisons, l’approche CSS est plus maintenable et permet d’implémenter plus rapidement des changements de style.
Utiliser CSS pour appliquer des styles SVG peut en déconcerter certains. <strong>fill</strong>, <strong>stroke</strong>, et <strong>stroke-width</strong>, ne sont, après tout, <em>pas</em> des propriétés CSS. (Les équivalents CSS les plus proches sont <strong>background-color</strong> et <strong>border</strong>.) Si ça peut vous aider à vous rappeler quelles règles sont spécifiques à SVG dans votre feuille de style, vous pouvez inclure <strong>svg</strong> dans ces sélecteurs :</li>
</ol>
<div class="highlight"><pre><code class="language-css" data-lang="css"><span class="nt">svg</span> <span class="nc">.pumpkin</span> <span class="p">{</span>
<span class="c">/* ... */</span>
<span class="p">}</span></code></pre></div>
<h3 id="calques-layers-et-ordre-de-dessin">Calques (<em>layers</em>) et ordre de dessin</h3>
<p>Il n’y a pas de “calques” en SVG, et pas de vrai concept de profondeur. SVG ne supporte pas la propriété CSS <strong>z-index</strong>, donc les formes sont organisées automatiquement dans un plan bi-dimensionnel x/y.</p>
<p>Et pourtant, si on dessine plusieurs formes, elles se superposent :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><rect</span> <span class="na">x=</span><span class="s">"0"</span> <span class="na">y=</span><span class="s">"0"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">fill=</span><span class="s">"purple"</span><span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"20"</span> <span class="na">y=</span><span class="s">"5"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">fill=</span><span class="s">"blue"</span><span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"40"</span> <span class="na">y=</span><span class="s">"10"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">fill=</span><span class="s">"green"</span><span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"60"</span> <span class="na">y=</span><span class="s">"15"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">fill=</span><span class="s">"yellow"</span><span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"80"</span> <span class="na">y=</span><span class="s">"20"</span> <span class="na">width=</span><span class="s">"30"</span> <span class="na">height=</span><span class="s">"30"</span> <span class="na">fill=</span><span class="s">"red"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<rect x="0" y="0" width="30" height="30" fill="purple"></rect>
<rect x="20" y="5" width="30" height="30" fill="blue"></rect>
<rect x="40" y="10" width="30" height="30" fill="green"></rect>
<rect x="60" y="15" width="30" height="30" fill="yellow"></rect>
<rect x="80" y="20" width="30" height="30" fill="red"></rect>
</svg>
<p>L’ordre dans lequel les éléments sont codés détermine leur profondeur. Le carré violet apparait en premier dans le code, donc il est dessiné en premier. Ensuite, le carré bleu est dessiné “par dessus” le violet, puis le carré vert et ainsi de suite.</p>
<p>Pensez aux formes SVG comme à des formes peintes sur une toile. La peinture-pixel qui est appliquée plus tard masque ce qui aurait été peint avant, et par là apparait comme étant “devant.”</p>
<p>Cet aspect d’ordre de dessin est important lorsque vous avez des éléments visuels qui ne devraient pas être cachés par d’autres. Par exemple, vous pourriez avoir des axes ou des étiquettes qui apparaissent sur un nuage de point (<em>scatterplot</em>). Les axes ainsi que les étiquettes devraient être ajoutés au SVG en dernier, pour qu’ils apparaissent devant tous les autres éléments.</p>
<h3 id="transparence">Transparence</h3>
<p>La transparence peut être utile lorsque des éléments de votre visualisation se superposent mais qu’ils doivent rester visibles, ou lorsque vous voulez désaccentuer (<em>de-emphasize</em>) certains éléments pour en mettre d’autres en valeur.</p>
<p>Il y a deux moyens d’appliquer une transparence : utilisez une couleur RGB avec alpha, ou définir une valeur d’opacité <strong>opacity</strong>.</p>
<p>Vous pouvez utiliser <strong>rgba()</strong> n’importe où pour spécifier une couleur, comme avec <strong>fill</strong> ou <strong>stroke</strong>. <strong>rgba()</strong> attend trois valeurs entre 0 et 255 pour le rouge, le vert et le bleu, plus une valeur alpha (transparence) entre 0.0 et 1.0.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"rgba(128, 0, 128, 1.0)"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"50"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"rgba(0, 0, 255, 0.75)"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"75"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"rgba(0, 255, 0, 0.5)"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"100"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"rgba(255, 255, 0, 0.25)"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"125"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"rgba(255, 0, 0, 0.1)"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 1.0)"></circle>
<circle cx="50" cy="25" r="20" fill="rgba(0, 0, 255, 0.75)"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.5)"></circle>
<circle cx="100" cy="25" r="20" fill="rgba(255, 255, 0, 0.25)"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255, 0, 0, 0.1)"></circle>
</svg>
<p>Notez qu’avec <strong>rgba()</strong>, la transparence est appliquée à <strong>fill</strong> et <strong>stroke</strong> indépendamment. Les cercles qui suivent ont une valeur de remplissage <strong>fill</strong> opaque à 75%, tandis que leur couleur de contour <strong>stroke</strong>s est opaque à seulement 25%.</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(128, 0, 128, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(0, 255, 0, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"75"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(0, 255, 0, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(0, 0, 255, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"125"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(255, 255, 0, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(255, 0, 0, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"></circle>
<circle cx="75" cy="25" r="20" fill="rgba(0, 255, 0, 0.75)" stroke="rgba(0, 0, 255, 0.25)" stroke-width="10"></circle>
<circle cx="125" cy="25" r="20" fill="rgba(255, 255, 0, 0.75)" stroke="rgba(255, 0, 0, 0.25)" stroke-width="10"></circle>
</svg>
<p>Pour appliquer une transparence à tout un élément, définissez un attribut <strong>opacity</strong>. Voilà quelques cercles complètement opaques</p>
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10"></circle>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10"></circle>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10"></circle>
</svg>
<p>suivis par les mêmes cercles, avec des valeurs d’opacité :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"purple"</span>
<span class="na">stroke=</span><span class="s">"green"</span> <span class="na">stroke-width=</span><span class="s">"10"</span>
<span class="na">opacity=</span><span class="s">"0.9"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"65"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"green"</span>
<span class="na">stroke=</span><span class="s">"blue"</span> <span class="na">stroke-width=</span><span class="s">"10"</span>
<span class="na">opacity=</span><span class="s">"0.5"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"105"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span> <span class="na">fill=</span><span class="s">"yellow"</span>
<span class="na">stroke=</span><span class="s">"red"</span> <span class="na">stroke-width=</span><span class="s">"10"</span>
<span class="na">opacity=</span><span class="s">"0.1"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="purple" stroke="green" stroke-width="10" opacity="0.9"></circle>
<circle cx="65" cy="25" r="20" fill="green" stroke="blue" stroke-width="10" opacity="0.5"></circle>
<circle cx="105" cy="25" r="20" fill="yellow" stroke="red" stroke-width="10" opacity="0.1"></circle>
</svg>
<p>Vous pouvez utiliser <strong>opacity</strong> sur un élément qui a déjà des couleurs définies avec <strong>rgba()</strong>. Lorsque vous faites cela, les transparences se multiplient. Les cercles qui suivent utilisent les mêmes valeurs RGBA pour <strong>fill</strong> et <strong>stroke</strong>. Le premier cercle ci-dessous n’a pas d’attribut <strong>opacity</strong> de défini, mais les deux autres l’ont :</p>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"25"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(128, 0, 128, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(0, 255, 0, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"65"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(128, 0, 128, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(0, 255, 0, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span>
<span class="na">opacity=</span><span class="s">"0.5"</span><span class="nt">/></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"105"</span> <span class="na">cy=</span><span class="s">"25"</span> <span class="na">r=</span><span class="s">"20"</span>
<span class="na">fill=</span><span class="s">"rgba(128, 0, 128, 0.75)"</span>
<span class="na">stroke=</span><span class="s">"rgba(0, 255, 0, 0.25)"</span> <span class="na">stroke-width=</span><span class="s">"10"</span>
<span class="na">opacity=</span><span class="s">"0.2"</span><span class="nt">/></span></code></pre></div>
<svg width="500" height="50">
<circle cx="25" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10"></circle>
<circle cx="65" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.5"></circle>
<circle cx="105" cy="25" r="20" fill="rgba(128, 0, 128, 0.75)" stroke="rgba(0, 255, 0, 0.25)" stroke-width="10" opacity="0.2"></circle>
</svg>
<p>Notez que l’opacité <strong>opacity</strong> du troisième cercle est égale à <strong>0.2</strong> soit 20%. Et pourtant son remplissage violet a déjà une valeur alpha de <strong>0.75</strong> ou 75%. La zone violette a donc une transparence finale de 0.2 fois 0.75 = 0.15 ou 15%.</p>
<blockquote>
<p>Pour plus d’informations sur SVG — notamment les chemins paths, clip-paths, masks, et filters — voir “<a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">An SVG Primer for Today’s Browsers</a>” de <a href="http://srufaculty.sru.edu/david.dailey/">David Dailey</a>.</p>
</blockquote>
</article>
</div>
<div class="col-md-12">
<ul class="pager">
<li class="previous">
<a href="/scottmurray-d3-fr/9-la-puissance-de-data.html" class="previous">← 9 - La puissance de data()</a>
</li>
<li class="next">
<a href="/scottmurray-d3-fr/11-dessiner-des-svgs.html" class="next">11 - Dessiner des SVGs →</a>
</li>
</ul>
</div>
</div>
<hr>
<footer class="col-md-12">
<div class="col-md-3">
<div class="panel panel-default">
<div class="panel-heading"><h4>Contacts</h4></div>
<div class="panel-body">
<ul class="list-unstyled">
<li>
github : <a href="https://github.com/kaisersly">kaisersly</a>
</li>
<li>
twitter : <a href="https://twitter.com/kaisersly">@kaisersly</a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>