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 April 2017.

Die fill-rule CSS Eigenschaft definiert die Regel, die verwendet wird, um zu bestimmen, welche Teile der Zeichenfläche der SVG-Form innerhalb einer Form gefüllt werden sollen. Wenn vorhanden, überschreibt sie das fill-rule Attribut des Elements.

Die fill-rule klärt, welche Bereiche einer Form als "innerhalb" der Form betrachtet werden sollen. Sie bietet zwei Werte, die Sie einstellen 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, ist die Grenze dessen, was innerhalb der zu füllenden Form liegt, intuitiv klar. Bei komplexen Formen, die sich überschneidende Pfade (wie ein Venn-Diagramm) oder Pfade, die andere Pfade einschließen (wie ein Donut), beinhalten, ist die Interpretation, welche Abschnitte der Form "innerhalb" der Form liegen und durch die fill Eigenschaft gefüllt werden sollen, möglicherweise nicht offensichtlich.

Hinweis: Die fill-rule Eigenschaft gilt nur für <path>, <polygon>, <polyline>, <text>, <textPath>, und <tspan> Elemente, die in einem <svg> eingebettet sind. Sie gilt nicht für andere SVG-, HTML- oder Pseudo-Elemente.

Syntax

css
/* 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 zufällige Richtung bis über die äußeren Kanten der Form hinaus gezeichnet. Jeder Strahl wird untersucht, um die Stellen zu bestimmen, an denen der Strahl die Form kreuzt. Beginnend mit einer Zählung von Null, wird jedes Mal eins hinzugefügt, wenn ein Pfadsegment den Strahl von links nach rechts kreuzt, und eins abgezogen, 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 Pfades. Andernfalls liegt er innerhalb.

evenodd

Für jeden Punkt im Füllregel-Box wird ein Strahl in eine zufällige Richtung gezeichnet. Die Anzahl der Pfadsegmente von der gegebenen Form, die der Strahl kreuzt, wird gezählt. Wenn diese Zahl ungerade ist, liegt der Punkt innen; wenn gerade, liegt er außen. Null wird als gerade angesehen.

Formale Definition

Anfangswertnonzero
Anwendbar aufSVG shapes and text content elements
VererbtJa
Berechneter Wertwie angegeben
Animationstypdiskret

Formale Syntax

fill-rule = 
  nonzero  |
  evenodd

Beispiele

Definition der Füllregeln für SVG-Elemente

Dieses Beispiel zeigt, 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 werden. 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 den Umriss auf rot mithilfe des SVG stroke Attributs (wir hätten alternativ die stroke Eigenschaft verwenden können).

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>

Das obige SVG wird dreimal wiederholt; wir haben nur eine Kopie aus Gründen der Kürze gezeigt.

CSS

Die in das erste SVG eingebetteten Formen haben kein angewandtes CSS. Wir setzen die Formen innerhalb des zweiten SVG auf den Wert nonzero. Das dritte SVG hat alle seine eingebetteten Formen auf evenodd gesetzt.

css
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, die als Attribut enthalten ist. 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

Siehe auch