Clip-rule - CSS Property
Summary of characteristics of the clip-rule property
nonzero | evenoddnonzeroDiscrète: during an animation, the clip-rule property passes from one value to another without transition.Single: single value (no order).Syntax diagram of clip-rule.
Description of the clip-rule property.
clip-rule defines how a shape should be filled when its outline overlaps itself. Basically, should the shape be hollow, or fully filled?
clip-rule comes into play when the SVG shape is used to mask an element.
The drawings below show this using a star shape (defined in SVG) used to mask an element that contains the Firefox logo image.
SVG).
clip-rule:nonzero
clip-rule:evenodd
Warning! clip-rule must be applied to the object that defines the cut shape (most often an SVG object) and not
to the element that uses this shape.
clip-rule has no effect if the shape used for the cut is a basic shape (circle(), inset(), polygon(), etc).
Special case of included forms.
If the shape is made up of two closed paths, with one inside the other, the outline never overlaps. The shape will be considered hollow if one path is drawn
clockwise and the other counterclockwise. The shape will be hollow regardless of the value assigned to the clip-rule property.
On the other hand, if both paths are in the same one, the property clip-rule determines if the shape is hollow.
Both circles are drawn in the same direction: the shape will only be hollow if
clip-rule has the value evenodd.
The two circles aren't drawn in the same direction: the shape will always be hollow, no matter what the value of the property
clip-rule is.
SVG code for the first figure:
svg xmlns="http://www.w3.org/2000/svg"
clipPath id="star-evenodd" clip-rule="evenodd"
path d="M100 10 L40 198 L190 78 L10 78 L160 198 Z" /
/clipath
/svg
SVG code for the second figure:
svg xmlns="http://www.w3.org/2000/svg"
clipPath id="star-nonzero" clip-rule="nonzero"
path d="M100 10 L40 198 L190 78 L10 78 L160 198 Z" /
/clipath
/svg
Values for clip-rule.
- clip-rule: nonzero;
Default value. The shape doesn’t have any holes, even if its outline overlaps.
- clip-rule: evenodd;
The shape can be pierced, depending on whether the outline overlaps itself or not, or depending on whether one shape is included within another.
- clip-rule: initial; (
nonzero) clip-rule: inherit; clip-rule: revert; clip-rule: revert-layer; clip-rule: revert-rule; clip-rule: unset;These values are described in more detail on their respective page:
initial,inherit,revert,revert-layer,revert-rule,unset.
Animation of the clip-rule property.
Because clip-rule accepts only two values, the animation is relatively simple.
Access the clip-rule property via a program
With Javascript, change the value of clip-rule.
The value of the property clip-rule can be changed in JavaScript. Here are two code examples, knowing that JS accepts the property name written
in kebab-case, which means a dash to separate words (like in CSS), or in camel-case: a capital letter to separate words.
let el = document.getElementById('id');
el.style['clip-rule'] = 'nonzero';
// or
let el = document.getElementById('id');
el.style.clipRule = 'nonzero';
With Javascript, read the value of clip-rule.
The property must have been set on the element by the Javascript code above or directly in the HTML code using the style attribute,
and not in CSS via a selector.
let el = document.getElementById('id');
el.style['clip-rule'] = 'nonzero';
// or
let el = document.getElementById('id');
el.style.clipRule = 'nonzero';
With Javascript, read the computed value of clip-rule.
The computed value is either the value applied to the property via the style attribute, or through a CSS selector, or the value determined
by inheritance, or even the initial value of the property: nonzero for clip-rule. The computed value is always defined.
let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('clip-rule');
With JQuery, read or change the value of clip-rule.
JQuery is a Javascript library. It generally has shorter syntax than Javascript.
// Read the value:
$('#id').prop('clip-rule');
// Write the value:
$('#id').prop('clip-rule', 'nonzero');
$('#id').prop('{clip-rule': 'nonzero'});
With JQuery, read the computed value of clip-rule.
let value = $('#id').css('clip-rule');
Other code examples.
For other code examples on handling properties with JavaScript and jQuery, see the page Javascript and CSS.
Test it yourself.
The buttons below apply the entered value to the clip-rule property and then display either the value as it was applied or the computed value.
In the case of clip-rule, it will be the same since the property doesn't accept numeric values. However, if you try to apply an unknown value,
the assigned value will be empty, while the computed value will be the property's initial value.
Browsers compatibility with clip-rule.
The property clip-rule is properly handled by browsers. Internet Explorer 
doesn't handle it, but that browser is no longer used.
clip-rule to determine if a shape is filled or not.clip-ruleproperty
Browsers on computers :
Mobile browsers :
Outdated or marginal browsers :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Opéra
Chrome
Edge
Firefox
Chrome pour Androïd
Samsung Internet
Androïd Brower
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historic of the clip-rule property.
-
CSS Masking Module Level 1
This specification module describes two ways to partially or completely hide portions of visual elements: masking and clipping.
Masking involves using another graphic element or an image as a mask.
Clipping describes the visible region of visual elements. The region can be described using certain SVG graphic elements or simple shapes. Anything outside this region is not rendered.Regardingclip-ruleIntroduction of masking techniques in the CSS standard, and definition of theclip-ruleproperty.
November 15, 2012Working Draft.
August 26, 2014Candidate Recommendation.
See also, about masking techniques.
The specification module that gathers everything related to masking is called CSS Masking Module. The property clip-rule and the properties
below are described in this module:
Properties:
