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

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft fill-rule definiert die Regel, die verwendet wird, um zu bestimmen, welche Teile der Zeichenfläche einer SVG-Form innerhalb einer zu füllenden Form liegen. Falls vorhanden, überschreibt sie das Attribut fill-rule des Elements.

fill-rule verdeutlicht, 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 ohne sich schneidende Pfade, wie einem Kreis, sind die Grenzen dessen, was innerhalb einer zu füllenden Form liegt, intuitiv klar. Bei komplexen Formen mit sich schneidenden Pfaden (wie etwa einem Venn-Diagramm) oder Pfaden, die andere Pfade umschließen (wie etwa einem Donut), ist möglicherweise nicht offensichtlich, welche Abschnitte der Form „innerhalb“ der Form liegen und durch die Eigenschaft fill gefüllt werden sollten.

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

Syntax

css

/* Keyword values */
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 über die äußeren Kanten der Form hinaus gezogen. Jeder Strahl wird untersucht, um die Stellen zu bestimmen, an denen der Strahl die Form kreuzt. Beginnend mit einem Zählerstand von null wird 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. Wenn nach dem Zählen der Kreuzungen das Ergebnis null ist, liegt der Punkt außerhalb des Pfads. Andernfalls liegt er innerhalb.
evenodd: Für jeden Punkt im Bereich der Füllregel wird ein Strahl in eine zufällige Richtung gezogen. Die Anzahl der Pfadsegmente der angegebenen Form, die der Strahl kreuzt, wird gezählt. Ist diese Anzahl ungerade, liegt der Punkt innerhalb; ist sie gerade, liegt der Punkt 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

Definieren der Füllregeln für SVG-Elemente

Dieses Beispiel demonstriert, wie eine fill-rule deklariert wird, die Auswirkung der Eigenschaft und wie die CSS-Eigenschaft fill-rule Vorrang vor dem Attribut fill-rule hat.

HTML

Wir definieren ein SVG mit zwei komplexen Formen, die mithilfe der SVG-Elemente <polygon> und <path> definiert werden. Das Polygon hat das SVG-Attribut fill-rule 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 mithilfe des SVG-Attributs stroke auf red (alternativ hätten wir die Eigenschaft stroke 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; der Kürze halber zeigen wir nur eine Kopie.

CSS

Auf die Formen, die im ersten SVG verschachtelt sind, wird kein CSS angewendet. Wir setzen die Formen innerhalb des zweiten SVG so, dass sie den Wert nonzero verwenden. Im dritten SVG sind alle verschachtelten 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 Wert nonzero für fill-rule ist das „Innere“ der Form die gesamte Form. Der Wert evenodd definiert einen Teil des Bereichs als leer. Das erste Bild rendert die als Attribut enthaltene fill-rule. Die Deklaration von 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-Attribut fill-rule
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
Datentyp <color>
Datentyp <basic-shape>

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