Clip-rule - Propriété CSS

clip-rule

Résumé des caractéristiques de la propriété clip-rule

Description rapide
Définit comment gérer les formes creuses dans le contexte d'un découpage.
Statut
Standard
S'applique à
Tous les éléments.
Utilisable sur
HTML, SVG
Valeurs prédéfinies
nonzero | evenodd
Pourcentages
Ne s'appliquent pas.
Valeur initiale
nonzero
Héritée par défaut
Oui.
Type d'animation
Discrète : lors d'une animation, la propriété clip-rule passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Masquage
Références (W3C)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de clip-rule.

clip-rule - Syntax DiagramSyntax diagram of the clip-rule CSS property. See stylescss.free.fr for details. nonzero nonzero evenodd evenoddclip-rule:;clip-rule:;
Schéma syntaxique de la propriété clip-rule
Afficher la syntaxe détaillée

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)

Exemple pour clip-rule
clip-rule:nonzero

Exemple pour clip-rule
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.

Exemple pour 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.
Exemple pour clip-rule
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.

Animation de 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.

Javascript
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.

Javascript
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.

Javascript
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.

JQuery

$('#id').css('clip-rule', 'nonzero');
// ou
$('#id').css('clipRule', 'nonzero');

Lire la valeur calculée de la propriété clip-rule avec JQuery.

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.

Colonne 1
Support de la propriété clip-rule pour déterminer si une forme est creuse ou pas.
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

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.
    WD
    15 Novembre 2012
    Document de travail.
    CR
    26 Août 2014
    Candidat à la recommandation.
    PR
    REC

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 :

Propriétés :

clip
Découpe un élément à partir d'un rectangle.
clip-path
Définit la partie visible de l'élément, délimitée par une forme géométrique (rectangle, polygone...).
mask
Propriété résumée définissant les paramètres de masquage : dimensions du masque, position, répétition, origine, etc.
mask-border
Définit tous les paramètres d'un masque pour la bordure d'un élément.
mask-border-mode
Définit sur quel paramètre le masque doit agir (luminance, alpha).
mask-border-outset
Définit le décalage éventuel du masque de bordure par rapport à l'élément.
mask-border-repeat
Définit le mode de répétition du masque.
mask-border-slice
Définit comment l'image utilisée comme masque doit être découpée.
mask-border-source
Désigne l'image qui sera utilisée comme masque (masque du type bordure).
mask-border-width
Définit l'épaisseur de la bordure pour l'application d'un masque.
mask-clip
Définit la zone concernée par le masquage.
mask-composite
Définit comment seront combinés les masques lorsque plusieurs sont appliqués sur un élément.
mask-image
Désigne l'image ou le fichier SVG qui sera utilisé comme masque.
mask-mode
Définit le mode de masquage (couche alpha, luminance...)
mask-origin
Définit la référence pour le positionnement du masque.
mask-position
Définit la position du masque.
mask-repeat
Définit le mode de répétition du masque lorsque celui-ci est plus petit que l'élément à masquer.
mask-size
Fixe les dimensions du masque.