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属性