-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
181 lines (148 loc) · 4.41 KB
/
index.md
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
---
title: fill-rule
slug: Web/SVG/Attribute/fill-rule
page-type: svg-attribute
browser-compat: svg.global_attributes.fill-rule
---
{{SVGRef}}
The **`fill-rule`** attribute is a presentation attribute defining the algorithm to use to determine the _inside_ part of a shape.
> [!NOTE]
> As a presentation attribute, `fill-rule` can be used as a CSS property.
You can use this attribute with the following SVG elements:
- {{SVGElement('path')}}
- {{SVGElement('polygon')}}
- {{SVGElement('polyline')}}
- {{SVGElement('text')}}
- {{SVGElement('textPath')}}
- {{SVGElement('tref')}}
- {{SVGElement('tspan')}}
## Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- Default value for fill-rule -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
The center of the shape has two
path segments (shown by the red stroke)
between it and infinity. It is therefore
considered outside the shape, and not filled.
-->
<polygon
fill-rule="evenodd"
stroke="red"
points="150,0 121,90 198,35 102,35 179,90" />
</svg>
```
{{EmbedLiveSample("Example", '100%', 200)}}
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td><code>nonzero</code> | <code>evenodd</code></td>
</tr>
<tr>
<th scope="row">Default value</th>
<td><code>nonzero</code></td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>discrete</td>
</tr>
</tbody>
</table>
The `fill-rule` attribute provides two options for how the inside (that is, the area to be filled) of a shape is determined:
### nonzero
The value `nonzero` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction, and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.
#### Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of nonzero fill rule on crossing path segments -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="nonzero"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="nonzero"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
```
{{EmbedLiveSample('nonzero', '100%', 200)}}
### evenodd
The value `evenodd` determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
#### Example
```css hidden
html,
body,
svg {
height: 100%;
}
```
```html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of evenodd fill rule on crossing path segments -->
<polygon
fill-rule="evenodd"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="evenodd"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="evenodd"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
```
{{EmbedLiveSample('evenodd', '100%', 200)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}