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