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.
Die fill-rule
CSS Eigenschaft definiert die Regel, die verwendet wird, um zu bestimmen, welche Teile der SVG-Shape-Leinwand innerhalb einer zu füllenden Form enthalten sind. Wenn vorhanden, überschreibt sie das fill-rule
Attribut des Elements.
Das fill-rule
klärt, welche Bereiche einer Form als "innerhalb" der Form betrachtet werden sollen. Es bietet zwei Werte, die Sie festlegen können, um dem Browser mitzuteilen, wie das Innere einer Form bestimmt werden soll. Bei Formen, die keine sich überschneidenden Pfade haben, wie ein Kreis, sind die Grenzen dessen, was innerhalb einer Form gefüllt werden soll, intuitiv klar. Bei komplexen Formen, die sich überschneidende Pfade (wie ein Venn-Diagramm) oder Pfade, die andere Pfade einschließen (wie ein Donut), beinhalten, könnte die Interpretation, welche Abschnitte der Form "innerhalb" der Form sind und durch die fill
Eigenschaft gefüllt werden sollen, nicht offensichtlich sein.
Hinweis: Die fill-rule
Eigenschaft gilt nur für <path>
, <polygon>
, <polyline>
, <text>
, <textPath>
, und <tspan>
Elemente, die in einem <svg>
verschachtelt sind. Sie gilt nicht für andere SVG, HTML oder Pseudo-Elemente.
Syntax
/* keywords */
fill-rule: evenodd;
fill-rule: nonzero;
/* Global values */
fill-rule: inherit;
fill-rule: initial;
fill-rule: revert;
fill-rule: revert-layer;
fill-rule: unset;
Werte
nonzero
-
Für jeden Punkt in der Form wird ein Strahl in eine Zufallsrichtung über die äußeren Kanten der Form hinaus gezogen. Jeder Strahl wird untersucht, um festzustellen, wo der Strahl die Form schneidet. Beginnend mit einem Zähler von null, addieren Sie eins jedes Mal, wenn ein Pfadsegment den Strahl von links nach rechts kreuzt und subtrahieren Sie eins jedes Mal, wenn ein Pfadsegment den Strahl von rechts nach links kreuzt. Nach dem Zählen der Kreuzungen, wenn das Ergebnis null ist, dann ist der Punkt außerhalb des Pfads. Andernfalls befindet er sich innerhalb des Pfads.
evenodd
-
Für jeden Punkt im Kasten der Füllregel wird ein Strahl in eine Zufallsrichtung gezogen. Die Anzahl der Pfadsegmente aus der gegebenen Form, die der Strahl schneidet, wird gezählt. Ist diese Zahl ungerade, befindet sich der Punkt innerhalb; ist sie gerade, befindet sich der Punkt außerhalb. Null wird als gerade angesehen.
Formale Definition
Initialer Wert | nonzero |
---|---|
Anwendbar auf | SVG shapes and text content elements |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
fill-rule =
nonzero |
evenodd
Beispiele
Festlegen der Füllregeln für SVG-Elemente
Dieses Beispiel demonstriert, wie eine fill-rule
deklariert wird, die Wirkung der Eigenschaft und wie die CSS fill-rule
Eigenschaft Vorrang vor dem fill-rule
Attribut hat.
HTML
Wir definieren ein SVG mit zwei komplexen Formen, die mit den SVG <polygon>
und <path>
Elementen definiert sind. Das Polygon hat das SVG fill-rule
Attribut auf evenodd
gesetzt, und der sternförmige Pfad ist auf nonzero
gesetzt, was der Standard ist. Um die Linien sichtbar zu machen, setzen wir die Umrandung auf red
mit dem SVG stroke
Attribut (wir hätten alternativ die stroke
Eigenschaft verwenden können).
<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>
Das obige SVG wird dreimal wiederholt; wir haben nur eine Kopie gezeigt, der Kürze halber.
CSS
Die Formen, die im ersten SVG verschachtelt sind, haben keine CSS-Anwendung. Wir setzen die Formen im zweiten SVG auf den Wert nonzero
. Das dritte SVG hat alle seine verschachtelten Formen auf evenodd
gesetzt.
svg:nth-of-type(2) > * {
fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
fill-rule: evenodd;
}
Ergebnisse
Mit dem Wert nonzero
für fill-rule
ist das "Innere" der Form die gesamte Form. Der Wert evenodd
definiert einige Bereiche als leer. Das erste Bild rendert die fill-rule
als Attribut. Die Deklaration der fill-rule
im CSS überschreibt die Attributwerte im zweiten und dritten Bild.
Spezifikationen
Specification |
---|
CSS Fill and Stroke Module Level 3 # fill-rule |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- SVG
fill-rule
Attribut - Präsentationseigenschaften:
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
, undvector-effect
opacity
background-color
<color>
<basic-shape>
Datentyp