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
<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>
Spécifications
Specification |
---|
Scalable Vector Graphics (SVG) 2 # WindingRule |
Compatibilité des navigateurs
BCD tables only load in the browser