clip-rule
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2020 browserübergreifend verfügbar.
Das Attribut clip-rule gilt nur für Grafikelemente innerhalb eines <clipPath>-Elements. Es funktioniert im Wesentlichen wie das Attribut fill-rule, wird jedoch auf <clipPath>-Definitionen angewendet.
Hinweis:
Als Präsentationsattribut hat clip-rule auch eine entsprechende CSS-Eigenschaft: clip-rule. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Das folgende Codefragment bewirkt, dass die Clipping-Regel evenodd auf den Clipping-Pfad angewendet wird, da clip-rule auf dem <path>-Element angegeben ist, das die Clipping-Form definiert:
<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
Das folgende Codefragment bewirkt dagegen nicht, dass die Clipping-Regel evenodd angewendet wird, da clip-rule auf dem referenzierenden Element und nicht auf dem Objekt angegeben ist, das die Clipping-Form definiert:
<g>
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
Elemente
Die folgenden Elemente können das Attribut clip-rule verwenden, jedoch nur, wenn sie sich innerhalb eines <clipPath>-Elements befinden.
Beispiel
<svg width="100" viewBox="0 0 100 90" xmlns="http://www.w3.org/2000/svg">
<!-- 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>
Verwendungshinweise
| Wert | nonzero | evenodd | inherit |
|---|---|
| Standardwert | nonzero |
| Animierbar | Ja |
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-clip-rule |
Browser-Kompatibilität
Siehe auch
<clipPath>- CSS-Eigenschaft
clip-rule