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

Die fill-rule CSS Eigenschaft definiert die Regel, die verwendet wird, um zu bestimmen, welche Teile der SVG-Form-Leinwand innerhalb einer Form eingeschlossen werden sollen, um gefüllt zu werden. Falls 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. Es gibt zwei Werte, die Sie setzen können, um dem Browser mitzuteilen, wie das Innere einer Form bestimmt werden soll. Für Formen, die keine sich überschneidenden Pfade haben, wie ein Kreis, sind die Grenzen dessen, was innerhalb einer zu füllenden Form liegt, intuitiv klar. Bei komplexen Formen, die sich überschneidende Pfade enthalten (wie ein Venn-Diagramm) oder Pfade, die andere Pfade einschließen (wie ein Donut), ist die Interpretation, welche Abschnitte der Form "innerhalb" der Form sind und von der 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> 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 einer beliebigen 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ä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 Pfades. Andernfalls ist er innerhalb.
evenodd: Für jeden Punkt im Füllregel-Kasten wird ein Strahl in eine beliebige Richtung gezogen. Die Anzahl der Segmente des gegebenen Pfades, die der Strahl kreuzt, werden gezählt. Wenn diese Zahl ungerade ist, liegt der Punkt innerhalb; wenn gerade, liegt er außerhalb. Null wird als gerade angesehen.

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 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 rot 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 der Kürze halber gezeigt.

CSS

Die in das erste SVG verschachtelten Formen haben kein CSS angewendet. Wir setzen die Formen im zweiten SVG, um den nonzero Wert zu verwenden. Das dritte SVG hat alle seine 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 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. Das Deklarieren der fill-rule im CSS überschreibt die Attributwerte in den zweiten und dritten Bildern.

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