Clip-rule - Propriété CSS

Schéma syntaxique de clip-rule.

Schéma syntaxique de la propriété clip-rule.
Télécharger le schéma en SVG.

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 ? clip-rule s'applique lorsque la forme SVG est utilisée pour masquer un élément.
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 l'image du logo de Firefox.

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. Pourtant 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. Par contre, si les deux tracés sont dans le même, la propriété clip-rule définit si la forme est creuse.

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.

Code SVG pour la première figure :

Code SVG pour la deuxième figure :

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, ou suivant qu'une forme est incluse dans une autre.
• clip-rule: initial; (nonzero) clip-rule: inherit; clip-rule: revert; clip-rule: revert-layer; clip-rule: revert-rule; clip-rule: unset;

  Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, revert-rule, unset.

Animation de la propriété clip-rule.

Étant donné que clip-rule n'accepte que deux valeurs, l'animation est relativement simple.

Manipulation de la propriété clip-rule par programme.

Avec Javascript, modifier la valeur de clip-rule.

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';

Avec Javascript, lire 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';

Avec Javascript, lire la valeur calculée de clip-rule.

La valeur calculée est soit la valeur appliquée à la propriété via l'attribut style, ou via un sélecteur CSS, soit la valeur déterminée par héritage, soit encore la valeur initiale de la propriété : nonzero pour clip-rule. La valeur calculée est toujours définie.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('clip-rule');

Avec JQuery, lire ou modifier la valeur de clip-rule.

JQuery est une librairie de Javascript. Elle présente en général des syntaxes plus courtes que celles de Javascript.


// Lire la valeur :
$('#id').prop('clip-rule');
// Écrire la valeur :
$('#id').prop('clip-rule', 'nonzero');
$('#id').prop('{clip-rule': 'nonzero'});


Avec JQuery, lire la valeur calculée de clip-rule.

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 puisque la propriété n'accepte pas de valeurs numériques. Cependant si vous tentez d'appliquer une valeur inconnue, la valeur affectée sera vide, tandis que la valeur calculée sera la valeur initiale de la propriété.

Prise en charge de clip-rule par les navigateurs.

La propriété clip-rule est correctement traitée par les navigateurs. Internet Explorer   ne la traite pas mais ce navigateur n'est plus utilisé.

1

Propriété
clip-rule

Estimation de la prise en charge globale.

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

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

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la propriété clip-rule.

• Module CSS - Masquage - Niveau 1

  Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
  Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
  Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.

  Concernant clip-rule Introduction des techniques de masquage dans le norme CSS, et définition de la propriété clip-rule.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à 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 Module CSS - Masquage (Module CSS - Masquage). La propriété clip-rule et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :