clip-rule

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

Das Attribut clip-rule gilt nur für Grafikelemente, die sich innerhalb eines <clipPath>-Elements befinden. Das Attribut clip-rule funktioniert im Wesentlichen wie das Attribut fill-rule, mit dem Unterschied, dass es auf Definitionen von <clipPath> angewendet wird.

Hinweis: Als Präsentationsattribut hat clip-rule auch ein entsprechendes CSS-Property: clip-rule. Wenn beide angegeben sind, hat das CSS-Property Vorrang.

Der folgende Codeausschnitt bewirkt, dass eine "evenodd"-Clipping-Regel auf den Clipping-Pfad angewendet wird, da clip-rule auf dem <path>-Element spezifiziert ist, das die Clipping-Form definiert:

html
<g>
  <clipPath id="MyClip">
    <path d="..." clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#MyClip)" ... />
</g>

Hingegen wird der folgende Codeausschnitt keine "evenodd"-Clipping-Regel anwenden, da clip-rule auf dem referenzierenden Element angegeben ist und nicht auf dem Objekt, das die Clipping-Form definiert:

html
<g>
  <clipPath id="MyClip">
    <path d="..." />
  </clipPath>
  <rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>

Verwendungshinweise

Wert nonzero | evenodd | inherit
Standardwert nonzero
Animierbar Ja
nonzero

Siehe Beschreibung der fill-rule-Eigenschaft.

evenodd

Siehe Beschreibung der fill-rule-Eigenschaft.

Beispiel

html
<svg
  width="100"
  viewBox="0 0 100 90"
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <!-- Define star path -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- Left: evenodd -->
  <clipPath id="emptyStar">
    <use href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- Right: nonzero -->
  <clipPath id="filledStar">
    <use href="#star" clip-rule="nonzero" />
  </clipPath>
  <rect clip-path="url(#filledStar)" width="50" height="90" x="50" fill="red" />
</svg>

Elemente

Die folgenden Elemente können das Attribut clip-rule verwenden, allerdings nur, wenn sie sich innerhalb eines <clipPath>-Elements befinden.

Spezifikationen

No specification found

No specification data found for undefined.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser-Kompatibilität

Siehe auch