Clip-rule - Propriété CSS
Résumé des caractéristiques de la propriété clip-rule
nonzero | evenoddnonzeroclip-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-ruleNavigateurs 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 :