clip-rule

clip-rule 属性仅适用于包含在 <clipPath> 元素内的图形元素。clip-rule 属性的工作原理与 fill-rule 属性基本相同，只是它应用于 <clipPath> 定义。

以下代码片段将导致奇偶裁剪规则应用于裁剪路径，因为 clip-rule 在定义裁剪形状的 <path> 元素上指定

html

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

而以下代码片段将不会导致奇偶裁剪规则应用，因为 clip-rule 在引用元素上指定，而不是在定义裁剪形状的对象上指定

html

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

作为呈现属性，它也可以用作 CSS 样式表中的直接属性

使用说明

值	nonzero \| evenodd \| inherit
默认值	nonzero
可动画	是

nonzero: 请参阅 fill-rule 属性的描述。
evenodd: 请参阅 fill-rule 属性的描述。

示例

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> 元素内。

图形元素

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

<clipPath>
CSS clip-rule 属性