clip-rule

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年7月⁩.

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>

一方、次のコードの断片では、クリップの形状を定義するオブジェクトではなく、参照する要素に clip-rule が指定されているため、 evenodd クリップルールは適用されません。

html

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

使用上のメモ

値	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">
  <!-- 星のパスを定義 -->
  <defs>
    <path d="M50,0 21,90 98,35 2,35 79,90z" id="star" />
  </defs>

  <!-- 左: evenodd -->
  <clipPath id="emptyStar">
    <use href="#star" clip-rule="evenodd" />
  </clipPath>
  <rect clip-path="url(#emptyStar)" width="50" height="90" fill="blue" />

  <!-- 右: 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>