Fill-rule - Propriété CSS
Résumé des caractéristiques de la propriété fill-rule
nonzero | evenoddnonzerofill-rule ne peut pas être animée.Schéma syntaxique de fill-rule.
fill-rule.Les liens du schéma donnent accès à plus de détails.
Description de la propriété fill-rule.
fill-rule définit comment doit se faire le remplissage d'une forme, dans le contexte d'une image SVG.
Lorsqu'il s'agit d'une forme simple comme un cercle, bien sûr la question ne se pose pas, mais les deux cas de figure ci-dessous sont moins évidents :
Le contour de la forme
se recoupe lui-même
La forme comporte un trou
fill-rule n'agit que sur une forme unique : une seule balise path par exemple. La propriété est sans effet sur deux formes qui se recoupent
si ces deux formes sont définies par des balises différentes.
Le sens dans lequel le contour est dessiné a également son importance.
Valeurs pour fill-rule.
- fill-rule: nonzero;
Pour savoir si un point est inclus dans la forme, on part de ce point avec une valeur de
0, et on s'éloigne ensuite vers l'extérieur de l'image SVG. En effectuant ce trajet, chaque fois qu'un contour est coupé, on ajoute1si le contour se dirige de gauche à droite, et on retire1si le contour se dirige de droite à gauche. Lorsque le bord de l'image est atteint, si la résultat est0, le point de départ n'est pas inclus dans la forme. Sinon il est inclus.SVGfill-rule:nonzero - fill-rule: evenodd;
La logique pour déterminer si un point est inclus dans le forme est légèrement différente : on part de ce point en s'éloignant vers le bord de l'image. Chaque fois que le contour est coupé on ajoute
1, mais le sens de tracé du contour n'est plus pris en compte. Lorsque le bord de l'image est atteint, si le résultat est impair, le point est à l'intérieur de la forme, sinon il est à l'extérieur.SVGfill-rule:evenodd - fill-rule: initial; (
nonzero) fill-rule: inherit; fill-rule: revert; fill-rule: revertLayer; fill-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é fill-rule.
La propriété fill-rule ne peut pas être animée.
Simulateur avec la propriété fill-rule.
Les deux images ci-dessous comportent chacune une seule forme (définie par la balise path) dont le contour se recoupe.
Voyez l'effet de la propriété fill-rule et, sur la première image, l'influence du sens dans lequel le contour est dessiné (flèches).
Prise en charge de fill-rule par les navigateurs.
fill-rule.fill-ruleNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Chrome
Edge
Opéra
Samsung Internet
Opéra Mobile
QQ Browser
Baidu Browser
Safari sur IOS
Safari
Firefox
Androïd Brower
Chrome pour Androïd
Firefox pour Androïd
KaiOS Browser
Opéra mini
Historique de la propriété fill-rule.
-
SVG (Scalable Vector Graphics)
Introduction de la propriétéfill-rule.
30 Octobre 2001Document de travail.
30 Avril 2002Candidat à la recommandation.
09 Juin 2011Proposé à la recommandation.
16 Août 2011Recommandation. -
SVG (Scalable Vector Graphics)
Pas de changement concernant la propriétéfill-rule.28 Août 2012Document de travail.15 Septembre 2016Candidat à la recommandation. -
Module CSS - Traits et remplissages - Niveau 3
Pas de changement concernant la description de la propriétéfill-rule.13 Avril 2017Document de travail.
Voir aussi, concernant SVG.
Tout ce qui concerne les remplissages et contours en SVG est maintenant décrit dans le module de spécification CSS Fill and Stroke Module.
Après avoir fait partie de la spécification SVG11 et SVG2, fill-rule est maintenant décrit dans ce module,
ainsi que les propriétés suivantes.
Propriétés :
fill-origin.