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.

Das Attribut fill-rule ist ein Präsentationsattribut, das den Algorithmus definiert, der verwendet wird, um den inneren Teil einer Form zu bestimmen.

Hinweis: Als Präsentationsattribut hat fill-rule auch ein Gegenstück als CSS-Eigenschaft: fill-rule. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Beispiel

html
<svg viewBox="-10 -10 220 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Default value for fill-rule -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  The center of the shape has two
  path segments (shown by the red stroke)
  between it and infinity. It is therefore
  considered outside the shape, and not filled.
  -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="150,0 121,90 198,35 102,35 179,90" />
</svg>

Hinweise zur Nutzung

Wert nonzero | evenodd
Standardwert nonzero
Animierbar diskret

Das Attribut fill-rule bietet zwei Optionen, um zu bestimmen, wie der innere Bereich (also der Bereich, der gefüllt werden soll) einer Form definiert wird:

nonzero

Der Wert nonzero bestimmt die „Innenseite“ eines Punktes innerhalb der Form, indem man von diesem Punkt aus einen Strahl in eine beliebige Richtung ins Unendliche zieht und die Stellen untersucht, an denen ein Segment der Form diesen Strahl schneidet. Beginnend mit einer Zählung von Null, addieren Sie eins, jedes Mal, wenn ein Pfadsegment den Strahl von links nach rechts schneidet, und subtrahieren Sie eins, jedes Mal, wenn ein Pfadsegment den Strahl von rechts nach links schneidet. Nach dem Zählen der Schnitte gilt: Wenn das Ergebnis null ist, liegt der Punkt außerhalb des Pfades. Andernfalls liegt er innerhalb.

Beispiel

html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of nonzero fill rule on crossing path segments -->
  <polygon
    fill-rule="nonzero"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Effect of nonzero fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (both squares drawn clockwise, to the "right")
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  Effect of nonzero fill rule on a shape inside a shape
  with the path segment moving in the opposite direction
  (one square drawn clockwise, the other anti-clockwise)
  -->
  <path
    fill-rule="nonzero"
    stroke="red"
    d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>

evenodd

Der Wert evenodd bestimmt die „Innenseite“ eines Punktes innerhalb der Form, indem man von diesem Punkt aus einen Strahl in eine beliebige Richtung ins Unendliche zieht und die Anzahl der Pfadsegmente der gegebenen Form zählt, die der Strahl schneidet. Ist diese Anzahl ungerade, liegt der Punkt innerhalb; ist sie gerade, liegt er außerhalb.

Beispiel

html
<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Effect of evenodd fill rule on crossing path segments -->
  <polygon
    fill-rule="evenodd"
    stroke="red"
    points="50,0 21,90 98,35 2,35 79,90" />

  <!--
  Effect of evenodd fill rule on a shape inside a shape
  with the path segment moving in the same direction
  (both squares drawn clockwise, to the "right")
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />

  <!--
  Effect of evenodd fill rule on a shape inside a shape
  with the path segment moving in opposite direction
  (one square drawn clockwise, the other anti-clockwise)
  -->
  <path
    fill-rule="evenodd"
    stroke="red"
    d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# WindingRule

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fill-rule

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch