CSS Reference

clip-rule

クリッピングの規則を指定する

clip-rule プロパティは、グラフィック要素を使用してクリッピング領域（切り抜き領域）を作成する際、ある点がそのクリッピング領域の内部にあるか、もしくは外側にあるかを判断するアルゴリズムを指定します。

clip-rule プロパティは、clipPath 要素の中に含まれるグラフィック要素にのみ適用されます。また、clip-rule のアルゴリズムと値の定義は、fill-rule プロパティと同じ方法で行われます。

指定できる値は下記の通りです。

nonzero パスが交差した際の線のカウントを使用して、クリッピング領域の内外を判断します。
このルールは、キャンバス上のある点が図形の内側かどうかを判定するために、その点から任意の方向へ無限に伸びる線を引き、その線が図形のパスと交差する場所を調べます。最初のカウントをゼロとし、パスが左から右へ交差するたびに1を加え、右から左へ交差するたびに1を引きます。交差の数をカウントした結果がゼロであれば、その点はパスの外側にあります。それ以外の数であれば、その点はパスの内側にあると判定されます。
evenodd 交差の回数が奇数か偶数かによってクリッピング領域の内外を判断します。
このルールは、キャンバス上のある点が図形の内側かどうかを判定するために、その点から任意の方向へ無限に伸びる線を引き、その線が図形のパスと交差する回数を数えます。その数が奇数であれば点はパスの内側、偶数であれば点はパスの外側とみなされます。

clip-ruleの仕様

初期値
  • nonzero
対象となる要素
  • SVG グラフィックス要素
継承
  • あり

clip-ruleのサンプルソース

<svg width="200" height="200">
  <clipPath id="clip">
    <path d="M 50,50 L 150,50 L 150,150 L 50,150 Z 
             M 75,75 L 125,75 L 125,125 L 75,125 Z"
          clip-rule="evenodd" />
  </clipPath>
  <rect width="200" height="200" clip-path="url(#clip)" fill="blue" />
</svg>

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome