fill-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

L'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui 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>

Exemple

html,
body,
svg {
  height: 100%;
}

html

<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:

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

html,
body,
svg {
  height: 100%;
}

html

<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

html,
body,
svg {
  height: 100%;
}

html

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

Spécifications

Specification
Scalable Vector Graphics (SVG) 2 # WindingRule

Compatibilité des navigateurs

BCD tables only load in the browser