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 July 2020.

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>

要素

次の要素は、 clip-rule 属性を使用することができますが、 <clipPath> 要素内に存在する場合に限ります。

仕様書

Specification
CSS Masking Module Level 1
# the-clip-rule

ブラウザーの互換性

関連情報