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.
Das fill-rule Attribut ist ein Präsentationsattribut, das den Algorithmus definiert, um den inneren Teil einer Form zu bestimmen.
Hinweis:
Als Präsentationsattribut hat fill-rule auch ein entsprechendes CSS-Attribut: fill-rule. Wenn beide angegeben sind, hat das CSS-Attribut Vorrang.
Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:
Beispiel
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
<!-- Default value for fill-rule -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
The center of the shape has two
path segments (shown by the red stroke)
between it and infinity. It is therefore
considered outside the shape, and not filled.
-->
<polygon
fill-rule="evenodd"
stroke="red"
points="150,0 121,90 198,35 102,35 179,90" />
</svg>
Nutzungshinweise
| Wert | nonzero | evenodd |
|---|---|
| Standardwert | nonzero |
| Animierbar | diskret |
Das fill-rule Attribut bietet zwei Optionen dafür, wie das Innere (also der zu füllende Bereich) einer Form bestimmt wird:
nonzero
Der Wert nonzero bestimmt die "Innigkeit" eines Punktes in der Form, indem ein Strahl von diesem Punkt bis ins Unendliche in beliebiger Richtung gezogen wird und dann die Stellen untersucht werden, an denen ein Segment der Form den Strahl kreuzt. Beginnend mit einem Zähler von null, wird eins dazugezählt, jedes Mal, wenn ein Pfadsegment den Strahl von links nach rechts kreuzt, und eines subtrahiert, jedes Mal, wenn ein Pfadsegment den Strahl von rechts nach links kreuzt. Nach dem Zählen der Kreuzungen, wenn das Ergebnis null ist, ist der Punkt außerhalb des Pfads. Andernfalls ist er innerhalb.
Beispiel
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of nonzero fill rule on crossing path segments -->
<polygon
fill-rule="nonzero"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="nonzero"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of nonzero fill rule on a shape inside a shape
with the path segment moving in the opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="nonzero"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
evenodd
Der Wert evenodd bestimmt die "Innigkeit" eines Punktes in der Form, indem ein Strahl von diesem Punkt bis ins Unendliche in beliebiger Richtung gezogen und die Anzahl der Pfadsegmente der gegebenen Form gezählt wird, die der Strahl kreuzt. Ist diese Zahl ungerade, liegt der Punkt innen; ist sie gerade, liegt er außen.
Beispiel
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
<!-- Effect of evenodd fill rule on crossing path segments -->
<polygon
fill-rule="evenodd"
stroke="red"
points="50,0 21,90 98,35 2,35 79,90" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in the same direction
(both squares drawn clockwise, to the "right")
-->
<path
fill-rule="evenodd"
stroke="red"
d="M110,0 h90 v90 h-90 z
M130,20 h50 v50 h-50 z" />
<!--
Effect of evenodd fill rule on a shape inside a shape
with the path segment moving in opposite direction
(one square drawn clockwise, the other anti-clockwise)
-->
<path
fill-rule="evenodd"
stroke="red"
d="M210,0 h90 v90 h-90 z
M230,20 v50 h50 v-50 z" />
</svg>
Spezifikationen
| Specification |
|---|
| Scalable Vector Graphics (SVG) 2 # WindingRule |
Browser-Kompatibilität
Siehe auch
- CSS
fill-ruleEigenschaft