« SVG Attribute reference home
The clip-rule attribute only applies to graphics elements that are contained within a <clipPath> element. The clip-rule attribute basically works as the fill-rule attribute, except that it applies to <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 <path> element that defines the clipping shape:
<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:
<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 context
| Categories | Presentation attribute |
|---|---|
| Value | nonzero | evenodd | inherit |
| Animatable | Yes |
| Normative document | SVG 1.1 (2nd Edition) |
Example
Elements
The following elements can use the clip-rule attribute, but only if they are inside a <clipPath> element.