ยซ 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
<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 xlink:href="#star" clip-rule="evenodd" /> </clipPath> <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" /> <!-- Right: nonzero --> <clipPath id="filledStar"> <use xlink:href="#star" clip-rule="nonzero" /> </clipPath> <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" /> </svg>
Elements
The following elements can use the clip-rule
attribute, but only if they are inside a <clipPath>
element.
Browser compatibility
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-rule | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown