-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
104 lines (81 loc) · 2.69 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
---
title: clip-rule
slug: Web/SVG/Attribute/clip-rule
page-type: svg-attribute
browser-compat: svg.global_attributes.clip-rule
---
{{SVGRef}}
« [SVG Attribute reference home](/en-US/docs/Web/SVG/Attribute)
The `clip-rule` attribute only applies to graphics elements that are contained within a {{ SVGElement("clipPath") }} element. The `clip-rule` attribute basically works as the {{ SVGAttr("fill-rule") }} attribute, except that it applies to {{ SVGElement("clipPath") }} definitions.
The following fragment of code will cause an evenodd clipping rule to be applied to the clipping path because `clip-rule` is specified on the {{ SVGElement("path") }} element that defines the clipping shape:
```html
<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
```
whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the `clip-rule` is specified on the referencing element, not on the object defining the clipping shape:
```html
<g>
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
```
As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet
## Usage notes
<table class="properties">
<tbody>
<tr>
<th scope="row">Value</th>
<td>nonzero | evenodd | inherit</td>
</tr>
<tr>
<th scope="row">Default value</th>
<td>nonzero</td>
</tr>
<tr>
<th scope="row">Animatable</th>
<td>Yes</td>
</tr>
</tbody>
</table>
- nonzero
- : See description of {{ SVGAttr("fill-rule") }} property.
- evenodd
- : See description of {{ SVGAttr("fill-rule") }} property.
## Example
```html
<svg
width="100"
viewBox="0 0 100 90"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<!-- Define star path -->
<defs>
<path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
</defs>
<!-- Left: evenodd -->
<clipPath id="emptyStar">
<use href="#star" clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />
<!-- Right: nonzero -->
<clipPath id="filledStar">
<use href="#star" clip-rule="nonzero" />
</clipPath>
<rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>
```
{{ EmbedLiveSample('Example', '100%', '110') }}
## Elements
The following elements can use the `clip-rule` attribute, but only if they are inside a {{ SVGElement("clipPath") }} element.
- [Graphics elements](/en-US/docs/Web/SVG/Element#graphics_elements)
## Browser compatibility
{{Compat}}
## See also
- {{ SVGElement("clipPath") }}
- CSS {{cssxref("clip-rule")}} property