Clip-rule - Propriété CSS
Résumé des caractéristiques de la propriété clip-rule
nonzero
| evenodd
nonzero
clip-rule
passe d'une valeur à l'autre sans transition.Schéma syntaxique de clip-rule
.
Description de la propriété clip-rule
.
clip-rule
définit comment doit être remplie une forme lorsque son contour se recoupe.
En gros, la forme doit-elle être creuse, ou entièrement remplie ?
Les dessins ci-dessous illustrent cela à partir de la forme d'une étoile (définie en SVG) utilisée pour masquer un élément contenant une image.
Forme utilisée pour la découpe (définie en SVG)
clip-rule:nonzero
clip-rule:evenodd
Attention ! clip-rule
doit être appliqué sur l'objet qui définit la forme de découpe (le plus souvent
un objet SVG
) et non pas sur l'élément qui utilise cette forme.
clip-rule
est sans effet si la forme utilisée pour la découpe est une forme de base (circle()
,
inset()
, polygon()
, etc).
Cas particulier des formes incluses.
Si la forme est composée de deux tracés fermés, l'un étant inclus dans l'autre, le contour ne se recoupe jamais.
La forme sera considérée comme creuse si l'un des tracés est défini dans le sens des aiguilles d'une montre,
et l'autre dans le sens inverse.
La forme sera creuse quelque soit la valeur affectée à la propriété clip-rule
.

Les deux cercles sont tracés dans le même sens : la forme ne sera creuse que si
clip-rule
a la valeur evenodd
.

Les deux cercles ne sont pas tracés dans le même sens : la forme sera toujours creuse, quelque sot la valeur de la propriété
clip-rule
.
Valeurs pour clip-rule
.
- clip-rule: nonzero;
Valeur par défaut. La forme ne comporte pas de trous, même si son contour se recoupe.
- clip-rule: evenodd;
La forme peut être percée, suivant que le contour repasse sur lui-même ou pas.
Valeurs communes :
clip-rule: initial (nonzero
)
clip-rule: inherit
clip-rule: revert
clip-rule: revertLayer
clip-rule: unset
Ces valeurs sont décrites plus en détail sur leur page respective : initial
, inherit
, revert
, revert-layer
, unset
.
Animation de la propriété clip-rule
.
Manipulation de la propriété clip-rule
par programme.
Modifier la valeur de clip-rule
en Javascript.
La valeur de la propriété clip-rule
peut être modifiée en Javascript.
Voici deux exemples de code, sachant que JS accepte le nom de la propriété écrit en kebab-case
, c'est à dire
un tiret pour séparer les mots (comme en CSS), ou en camel-case
: une majuscule pour séparer les mots.

let el = document.getElementById('id');
el.style['clip-rule'] = 'nonzero';
// ou
let el = document.getElementById('id');
el.style.clipRule = 'nonzero';
Lire en Javascript la valeur de clip-rule
.
La propriété doit avoir été affectée à l'élément par le code Javascript ci-dessus ou directement dans le code HTML, avec l'attribut
style
, et non pas en CSS via un sélecteur.

let el = document.getElementById('id');
el.style['clip-rule'] = 'nonzero';
// ou
let el = document.getElementById('id');
el.style.clipRule = 'nonzero';
Lire la valeur calculée de clip-rule
en Javascript.
La valeur calculée est soit la valeur appliquée à la propriété via un sélecteur, soit la valeur déterminée par héritage.

let el = document.getElementById('id');
let value = window.getComputedStyle(el).getPropertyValue('clip-rule');
Modifier la valeur de la propriété clip-rule
avec JQuery.
Comme Javascript, les syntaxes en kebab-case
et en camel-case
sont toutes les deux reconnues.

$('#id').css('clip-rule', 'nonzero');
// ou
$('#id').css('clipRule', 'nonzero');
Lire la valeur calculée de la propriété clip-rule
avec JQuery.

let value = $('#id').css('clip-rule');
Autres exemples de code.
Pour d'autres exemples de code pour manipuler les propriétés avec Javascript et JQuery, voyez la page Javascript et CSS.
Testez vous-même.
Les boutons ci-dessous appliquent la valeur saisie à la propriété clip-rule
et affichent ensuite soit la valeur telle qu'elle a été appliquée,
soit la valeur calculée. Dans le cas de clip-rule
, ce sera la même chose.
Prise en charge de clip-rule
par les navigateurs.
clip-rule
pour déterminer si une forme est creuse ou pas.clip-rule
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini
Historique de la propriété clip-rule
.
-
Module CSS - Masquage - Niveau 1
Introduction des techniques de masquage dans le norme CSS, et définition de la propriétéclip-rule
.15 Novembre 2012Document de travail.26 Août 2014Candidat à la recommandation.
Voir aussi, au sujet des techniques de masquage.
Le module de spécification qui regroupe tout ce qui concerne le masquage s'appelle CSS Masking Module (Module CSS - Masquage).
La propriété clip-rule
et les propriétés ci-dessous sont décrites dans ce module :