L'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties sont considérées à l'intérieur de la forme.

Note: fill-rule est un attribut de présentation et peut donc être utilisé comme propriété CSS.

Cet attribut peut être appliqué à n'importe quel élément mais n'aura d'effet que sur les éléments suivants: <altGlyph>, <path>, <polygon>, <polyline>, <text>, <textPath>, <tref>, et <tspan>

<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Valeur par défaut pour fill-rule -->
  <polygon fill-rule="nonzero" stroke="red"
   points="50,0 21,90 98,35 2,35 79,90"/>

  <!--
  Les points au centre de la forme ont 2
  segments (matérialisés par le trait rouge)
  Avec la règle evenodd, ils sont considérés en
  dehors de la forme, et l'intérieur de l'étoile
  est donc vide.
  -->
  <polygon fill-rule="evenodd" stroke="red"
   points="150,0 121,90 198,35 102,35 179,90"/>
</svg>

Usage

Valeur nonzero | evenodd
Valeur par défaut nonzero
Animation Yes

L'attribut fill-rule peut prendre deux valeurs:

nonzero

La valeur nonzero détermine si un point est à l'intérieur d'une forme en dessinant un rayon à partir de ce point vers l'infini dans toutes les directions, puis examine les endroits où un segment de la forme traverse le rayon.

À chaque fois qu'un segment traverse le rayon de gauche à droite, on ajoute un. À chaque fois qu'un segment traverse le rayon de droite à gauche, on soustrait un. Si au final, le compte est égal à zéro, le point est l'extérieur. Dans le cas contraire, il est à l'intérieur.

Exemple

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
  <polygon fill-rule="nonzero" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>
 
  <!--
  Effet sur une forme dans une forme
  lorsque le segment va dans la même direction
  (vers la droite)
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>
 
  <!--
  Effet sur une forme dans une forme
  lorsque le segment va dans la direction opposée
  (vers la gauche contre vers la droite)
  -->
  <path fill-rule="nonzero" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

evenodd

La valeur evenodd détermine si un point est à l'intérieur d'une forme en dessinant un rayon de à partir de ce point vers l'infini dans toutes les directions, et compte le nombre de segments de la forme qui traversent ce rayon. Si ce nombre est impair (odd en anglais), alors le point est à l'intérieur. Si le nombre est pair (even en anglais), alors le point est à l'extérieur.

Exemple

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effet de la règle de remplissage sur les segments qui se croisent -->
  <polygon fill-rule="evenodd" stroke="red"
           points="50,0 21,90 98,35 2,35 79,90"/>
 
  <!--
  Effet sur une forme dans une forme
  lorsque le segment va dans la même direction
  (vers la droite)
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z"/>
 
  <!--
  Effet sur une forme dans une forme
  lorsque le segment va dans la direction opposée
  (vers la gauche contre vers la droite)
  -->
  <path fill-rule="evenodd" stroke="red"
        d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z"/>
</svg>

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome ? Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Compatibilité inconnue  
Compatibilité inconnue

Spécification

Spécification Statut Commentaire
Scalable Vector Graphics (SVG) 2
La définition de 'fill-rule' dans cette spécification.
Candidat au statut de recommandation Définition pour les formes et le texte
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
La définition de 'fill-rule' dans cette spécification.
Recommendation Définition initiale pour les formes et le texte

 

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : a-mt
Dernière mise à jour par : a-mt,