clip-rule
clip-rule 屬性僅適用於包含在 <clipPath> 元素內的圖形元素。clip-rule 屬性的工作方式基本與 fill-rule 屬性相同，只是它適用於 <clipPath> 定義。
注意： 作為一個呈現屬性，clip-rule 還有一個對應的 CSS 屬性：clip-rule。當兩者都被指定時，CSS 屬性具有更高的優先順序。
以下程式碼片段將因為在定義裁剪形狀的 <path> 元素上指定了 clip-rule 而導致應用 evenodd 裁剪規則。
html
<g>
<clipPath id="MyClip">
<path d="..." clip-rule="evenodd" />
</clipPath>
<rect clip-path="url(#MyClip)" ... />
</g>
而以下程式碼片段不會應用 evenodd 裁剪規則，因為 clip-rule 是在引用元素上指定的，而不是在定義裁剪形狀的物件上。
html
<g>
<clipPath id="MyClip">
<path d="..." />
</clipPath>
<rect clip-path="url(#MyClip)" clip-rule="evenodd" ... />
</g>
用法說明
| 值 | nonzero | evenodd | inherit |
|---|---|
| 預設值 | nonzero |
| 可動畫的 | 是 |
示例
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>
元素
以下元素可以使用 clip-rule 屬性，但前提是它們必須位於 <clipPath> 元素內部。
規範
| 規範 |
|---|
| CSS 蒙版模組 Level 1 # the-clip-rule |
瀏覽器相容性
載入中…
另見
<clipPath>- CSS
clip-rule屬性