fill-rule

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis avril 2017.

La propriété CSS fill-rule définit la règle utilisée pour déterminer quelles parties de la zone de dessin d'une forme SVG sont incluses à l'intérieur d'une forme à remplir. Si elle est présente, elle remplace l'attribut SVG fill-rule de l'élément.

La propriété fill-rule précise quelles zones d'une forme doivent être considérées comme « intérieures ». Elle propose deux valeurs que vous pouvez définir pour indiquer au navigateur comment déterminer l'intérieur d'une forme. Pour les formes qui n'ont pas de chemins qui se croisent, comme un cercle, les limites de ce qui est à l'intérieur d'une forme à remplir sont intuitivement claires. Avec des formes complexes comprenant des chemins qui se croisent (comme un diagramme de Venn) ou des chemins qui enclosent d'autres chemins (comme un anneau), l'interprétation des sections de la forme qui sont « intérieures » et doivent être remplies par la propriété fill peut ne pas être évidente.

Note : La propriété fill-rule ne s'applique qu'aux éléments <path>, <polygon>, <polyline>, <text>, <textPath> et <tspan> imbriqués dans un <svg>. Elle ne s'applique pas aux autres éléments SVG, HTML ou pseudo-éléments.

Syntaxe

css

/* Valeurs avec un mot-clé */
fill-rule: evenodd;
fill-rule: nonzero;

/* Valeurs globales */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;

Valeurs

nonzero: Pour chaque point de la forme, un rayon est tracé dans une direction aléatoire au-delà des bords extérieurs de la forme. Chaque rayon est examiné pour déterminer les endroits où il croise la forme. En partant d'un compteur à zéro, ajoutez un à chaque fois qu'un segment de chemin croise le rayon de gauche à droite et soustrayez un à chaque fois qu'un segment de chemin croise le rayon de droite à gauche. Après avoir compté les croisements, si le résultat est zéro, le point est à l'extérieur du chemin. Sinon, il est à l'intérieur.
evenodd: Pour chaque point de la boîte de la règle de remplissage, un rayon est tracé dans une direction aléatoire. Le nombre de segments de chemin de la forme donnée que le rayon croise est compté. Si ce nombre est impair, le point est à l'intérieur ; s'il est pair, le point est à l'extérieur. Zéro est considéré comme pair.

Définition formelle

Valeur initiale	`nonzero`
Applicabilité	SVG shapes and text content elements
Héritée	oui
Valeur calculée	comme spécifié
Type d'animation	discrète

Syntaxe formelle

fill-rule = 
  nonzero  |
  evenodd

Exemples

Définir les règles de remplissage pour les éléments SVG

Cet exemple montre comment une propriété fill-rule est déclarée, l'effet de la propriété, et comment la propriété CSS fill-rule prend le pas sur l'attribut fill-rule.

HTML

Nous définissons un SVG avec deux formes complexes définies à l'aide des éléments SVG <polygon> et <path>. Le polygone a l'attribut SVG fill-rule défini sur evenodd et le chemin en forme d'étoile est défini sur nonzero, qui est la valeur par défaut. Pour rendre les lignes visibles, nous définissons le contour sur red à l'aide de l'attribut SVG stroke (nous aurions pu utiliser la propriété stroke).

<p>SVG original</p>

html

<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

<p><code>fill-rule: nonzero;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>
<p><code>fill-rule: evenodd;</code></p>
<svg viewBox="0 0 220 120" xmlns="http://www.w3.org/2000/svg">
  <polygon
    points="180,10 150,100 220,40 140,40 210,100"
    stroke="red"
    fill-rule="evenodd" />
  <path
    d="M 10,5 l 90,0 -80,80 0,-60 80,80 -90,0 z"
    stroke="red"
    fill-rule="nonzero" />
</svg>

Le SVG ci-dessus est répété trois fois ; nous n'avons montré qu'une seule copie pour plus de concision.

CSS

Les formes imbriquées dans le premier SVG n'ont pas de CSS appliqué. Nous définissons les formes à l'intérieur du second SVG pour utiliser la valeur nonzero. Le troisième SVG a toutes ses formes imbriquées définies sur evenodd.

svg {
  border: 1px solid;
  height: calc(33vh - 2.5em);
  margin-bottom: 10px;
}
p {
  margin: 0;
}

css

svg:nth-of-type(2) > * {
  fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
  fill-rule: evenodd;
}

Résultat

Avec la valeur nonzero pour fill-rule, « l'intérieur » de la forme est toute la forme. La valeur evenodd définit certains espaces comme vides. La première image affiche le fill-rule inclus comme attribut. Déclarer le fill-rule dans le CSS remplace les valeurs d'attribut dans les deuxième et troisième images.

Spécifications

Specification
CSS Fill and Stroke Module Level 3 # fill-rule

Compatibilité des navigateurs

Voir aussi

L'attribut SVG fill
Propriétés de présentation : fill-rule, clip-rule, color-interpolation-filters, fill-opacity, fill, marker-end, marker-mid, marker-start, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor et vector-effect
La propriété opacity
La propriété background-color
Le type de donnée <color>
Le type de donnée <basic-shape>

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 3 févr. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content