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

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 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

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

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).

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

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 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