`fill-rule` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2017 browserübergreifend verfügbar.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Die fill-rule CSS Eigenschaft definiert die Regel, die verwendet wird, um festzulegen, welche Teile der Leinwand einer SVG-Form innerhalb einer Form enthalten sind, die gefüllt werden soll. Wenn vorhanden, überschreibt sie das fill-rule-Attribut des Elements.

Die fill-rule verdeutlicht, welche Bereiche einer Form als "innerhalb" der Form betrachtet werden sollen. Sie bietet zwei Werte, mit denen Sie dem Browser mitteilen können, wie das Innere einer Form bestimmt werden soll. Für Formen, die keine sich überschneidenden Pfade aufweisen, wie etwa ein Kreis, sind die Grenzen dessen, was innerhalb der Form gefüllt werden soll, intuitiv klar. Bei komplexen Formen, die überschneidende Pfade enthalten (wie ein Venn-Diagramm) oder Pfade, die andere Pfade umschließen (wie ein Donut), 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 die <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

Diese Eigenschaft wird als einer der folgenden Schlüsselwortwerte angegeben:

nonzero: Für jeden Punkt in der Form wird ein Strahl in eine zufällige Richtung bis über die äußeren Ränder der Form hinaus gezogen. Jeder Strahl wird untersucht, um festzustellen, wo der Strahl die Form schneidet. Beginnend mit einem Zähler von null wird jedes Mal eins addiert, wenn ein Pfadsegment den Strahl von links nach rechts kreuzt, und eins subtrahiert, wenn ein Pfadsegment den Strahl von rechts nach links kreuzt. Nach der Zählung der Kreuzungen, wenn das Ergebnis null ist, dann liegt der Punkt außerhalb des Pfades. Andernfalls liegt er innerhalb.
evenodd: Für jeden Punkt in der Box der Füllregel wird ein Strahl in eine zufällige Richtung gezogen. Die Anzahl der Pfadsegmente der gegebenen Form, die der Strahl kreuzt, wird gezählt. Wenn diese Zahl ungerade ist, liegt der Punkt innerhalb; wenn gerade, liegt er außerhalb. Null wird als gerade betrachtet.

Formale Definition

Anfangswert	`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 zeigt, wie eine fill-rule deklariert wird, die Wirkung der Eigenschaft und wie die CSS fill-rule-Eigenschaft die fill-rule-Attribut überschreibt.

HTML

Wir definieren ein SVG mit zwei komplexen Formen, die mithilfe der SVG <polygon> und <path> Elemente definiert sind. Das Polygon hat das SVG fill-rule-Attribut auf evenodd gesetzt und der sternförmige Pfad ist auf nonzero gesetzt, was der Standardwert ist. Um die Linien sichtbar zu machen, setzen wir den Umriss auf red mit dem SVG stroke-Attribut (wir hätten alternativ die stroke-Eigenschaft verwenden können).

<p>Original SVG</p>

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>

<p><code>fill-rule: nonzero;</code></p>
<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>
<p><code>fill-rule: evenodd;</code></p>
<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 zu Briefzwecken gezeigt.

CSS

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

svg {
  border: 1px solid;
  height: calc(33vh - 2.5em);
  margin-bottom: 10px;
}
p {
  margin: 0;
}

css

svg:nth-of-type(2) > * {
  fill-rule: nonzero;
}
svg:nth-of-type(3) > * {
  fill-rule: evenodd;
}

Ergebnisse

Mit dem nonzero Wert für fill-rule ist das "Innere" der Form die gesamte Form. Der evenodd Wert 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

Spezifikation
CSS Fill and Stroke Module Level 3 # fill-rule

Browser-Kompatibilität

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, und vector-effect
opacity
background-color
<color>
<basic-shape> Datentyp

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

fill-rule CSS property

HTML

CSS

Ergebnisse

Help improve MDN

`fill-rule` CSS property