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 clip-rule Attribut gilt nur für Grafikelemente, die innerhalb eines <clipPath> Elements enthalten sind. Das clip-rule Attribut funktioniert im Wesentlichen wie das fill-rule Attribut, mit dem Unterschied, dass es für <clipPath> Definitionen angewendet wird.
Hinweis:
Als Präsentationsattribut hat clip-rule auch ein CSS-Äquivalent: clip-rule. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.
Der folgende Codeausschnitt führt dazu, dass eine evenodd-Zuschneidungsregel auf den Clipping-Pfad angewendet wird, da clip-rule auf dem <path> Element angegeben ist, das die Zuschneideform definiert:
<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
während der folgende Codeausschnitt keine evenodd-Zuschneidungsregel anwendet, weil clip-rule auf dem verweisenden Element angegeben ist, nicht auf dem Objekt, das die Zuschneideform definiert:
<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 |
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>
Elemente
Die folgenden Elemente können das clip-rule Attribut verwenden, aber nur, wenn sie sich innerhalb eines <clipPath> Elements befinden.
Spezifikationen
| Spezifikation |
|---|
| CSS Masking Module Level 1 # the-clip-rule |
Browser-Kompatibilität
Siehe auch
<clipPath>- CSS
clip-ruleEigenschaft