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 fill-rule Attribut ist ein Präsentationsattribut, das den Algorithmus definiert, um den inneren Teil einer Form zu bestimmen.

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

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

html,
body,
svg {
  height: 100%;
}

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>

Nutzungshinweise

Wert	`nonzero` \| `evenodd`
Standardwert	`nonzero`
Animierbar	diskret

Das fill-rule Attribut bietet zwei Optionen, um zu bestimmen, wie das Innere (das heißt, der zu füllende Bereich) einer Form bestimmt wird:

Der Wert nonzero bestimmt die "Innerheit" eines Punktes in der Form, indem ein Strahl von diesem Punkt in jede Richtung bis zur Unendlichkeit gezeichnet wird und dann die Stellen untersucht werden, an denen ein Segment der Form den Strahl kreuzt. Beginnend mit einem Zählwert von Null, wird bei jedem Überqueren eines Pfadsegments von links nach rechts eins hinzugezählt und bei jedem Überqueren von rechts nach links eins abgezogen. Nach dem Zählen der Kreuzungen, wenn das Ergebnis Null ist, liegt der Punkt außerhalb des Pfades. Andernfalls liegt er innerhalb.

Beispiel

html,
body,
svg {
  height: 100%;
}

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 "Innerheit" eines Punktes in der Form, indem ein Strahl von diesem Punkt in jede Richtung bis zur Unendlichkeit gezeichnet wird und die Anzahl der Pfadsegmente der gegebenen Form gezählt wird, die der Strahl kreuzt. Wenn diese Zahl ungerade ist, liegt der Punkt innen; wenn gerade, liegt er außen.

Beispiel

html,
body,
svg {
  height: 100%;
}

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

Siehe auch

CSS fill-rule Eigenschaft