fill-rule
=========

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>` (en-US), `<tref>` (en-US), 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:

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

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 with JavaScript enabled. Enable JavaScript to view data.