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
|
---
title: fill-rule
slug: Web/SVG/Attribute/fill-rule
tags:
- SVG
- SVG Attribute
translation_of: Web/SVG/Attribute/fill-rule
---
<div>{{SVGRef}}</div>
<p>L'attribut <strong><code>fill-rule</code></strong> définit l'algorithme à utiliser pour déterminer les parties qui sont considérées <em>à l'intérieur</em> de la forme.</p>
<div class="note">
<p><strong>Note :</strong> <code>fill-rule</code> est un attribut de présentation et peut donc être utilisé comme propriété CSS.</p>
</div>
<p>Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: {{SVGElement('altGlyph')}}, {{SVGElement('path')}}, {{SVGElement('polygon')}}, {{SVGElement('polyline')}}, {{SVGElement('text')}}, {{SVGElement('textPath')}}, {{SVGElement('tref')}}, et {{SVGElement('tspan')}}</p>
<h2>Exemple</h2>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: html"><svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- Valeur par défaut pour fill-rule -->
<polygon fill-rule="nonzero" stroke="red"
points="50,0 21,90 98,35 2,35 79,90"/>
<!--
Les points au centre de la forme ont 2
segments (matérialisés par le trait rouge)
Avec la règle evenodd, ils sont considérés en
dehors de la forme, et l'intérieur de l'étoile
est donc vide.
-->
<polygon fill-rule="evenodd" stroke="red"
points="150,0 121,90 198,35 102,35 179,90"/>
</svg></pre>
<p>{{EmbedLiveSample('exemple', '100%', 200)}}</p>
<h2 id="Usage">Usage</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="row">Valeur</th>
<td><code>nonzero</code> | <code>evenodd</code></td>
</tr>
<tr>
<th scope="row">Valeur par défaut</th>
<td><code>nonzero</code></td>
</tr>
<tr>
<th scope="row">Animation</th>
<td>Yes</td>
</tr>
</tbody>
</table>
<p>L'attribut <code>fill-rule</code> peut prendre deux valeurs:</p>
<h3 id="nonzero">nonzero</h3>
<p>La valeur <code>nonzero</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.</p>
<p>À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.</p>
<h4 id="Exemple">Exemple</h4>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la règle de remplissage sur les segments qui se croisent -->
<polygon fill-rule="nonzero" stroke="red"
points="50,0 21,90 98,35 2,35 79,90"/>
<!--
Effet sur une forme dans une forme
lorsque le segment va dans la même direction
(vers la droite)
-->
<path fill-rule="nonzero" stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z"/>
<!--
Effet sur une forme dans une forme
lorsque le segment va dans la direction opposée
(vers la gauche contre vers la droite)
-->
<path fill-rule="nonzero" stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z"/>
</svg></pre>
<p>{{EmbedLiveSample('nonzero', '100%', 200)}}</p>
<h3 id="evenodd">evenodd</h3>
<p>La valeur <code>evenodd</code> détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (<em>odd</em> en anglais), alors le point est à l'intérieur. Si le nombre est pair (<em>even</em> en anglais), alors le point est à l'extérieur.</p>
<h4 id="Exemple_2">Exemple</h4>
<pre class="brush: css hidden">html,body,svg { height:100% }</pre>
<pre class="brush: html"><svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effet de la règle de remplissage sur les segments qui se croisent -->
<polygon fill-rule="evenodd" stroke="red"
points="50,0 21,90 98,35 2,35 79,90"/>
<!--
Effet sur une forme dans une forme
lorsque le segment va dans la même direction
(vers la droite)
-->
<path fill-rule="evenodd" stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z"/>
<!--
Effet sur une forme dans une forme
lorsque le segment va dans la direction opposée
(vers la gauche contre vers la droite)
-->
<path fill-rule="evenodd" stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z"/>
</svg></pre>
<p>{{EmbedLiveSample('evenodd', '100%', 200)}}</p>
<h2 id="Browser_Compatibility">Compatibilité des navigateurs</h2>
<p>{{Compat("svg.attributes.presentation.fill-rule")}}</p>
<h2 id="Spécification">Spécification</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">Statut</th>
<th scope="col">Commentaire</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("SVG2", "painting.html#FillRuleProperty", "fill-rule")}}</td>
<td>{{Spec2("SVG2")}}</td>
<td>Définition pour les formes et le texte</td>
</tr>
<tr>
<td>{{SpecName("SVG1.1", "painting.html#FillRuleProperty", "fill-rule")}}</td>
<td>{{Spec2("SVG1.1")}}</td>
<td>Définition initiale pour les formes et le texte</td>
</tr>
</tbody>
</table>
<p> </p>
|
