Movatterモバイル変換

[0]ホーム
URL:

  1. 開発者向けのウェブ技術
  2. CSS
  3. リファレンス
  4. プロパティ
  5. clip-rule

このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。

View in EnglishAlways switch to English

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年1月⁩.

clip-rule はCSS のプロパティで、パスの一部が他の部分と重なった場合、マスクのボックス内のピクセルが、クリップパスで定義されたクリップするシェイプの内側にあるか、外側にあるかを決定します。

clip-rule プロパティは、<clipPath> 要素内に含まれる SVG 要素にのみ適用され、要素のclip-rule 属性の値がある場合はそれを上書きします。clip-rule プロパティは、基本的にfill-rule プロパティと同じように機能しますが、<clipPath> 定義に適用される点が異なります。 CSS の<basic-shape> には何の効果もありません。

構文

css
/* キーワード */clip-rule: nonzero;clip-rule: evenodd;/* グローバル値 */clip-rule: inherit;clip-rule: initial;clip-rule: revert;clip-rule: revert-layer;clip-rule: unset;

値

nonzero

クリップマスクのボックス内のすべての点について、ランダムな方向に光線が描画されます。光線がクリップパスの任意の部分と交差するたびに、クリップパスの部分が光線を左から右に移動している場合は、カウントが 1 増加します。一方、パス部分が光線を右から左に移動している場合は、カウントが 1 減少します。カウントが最終的に 0 の場合、その点はパスの形状の外側にあることになります。それ以外の場合は、パスの形状の内側にあることになります。

even-odd

クリッピングマスクのボックス内のすべての点について、ランダムな方向に光線が描画されます。光線がクリッピングパスの任意の部分と交差するたびに、カウントが 1 ずつ増加します。カウントが最終的に偶数の場合、その点はパスの形状の外側にあることになります。それ以外の場合は、パスの形状の内側にあることになります。0 は偶数であるとみなされます。

形式文法

clip-rule =
nonzero|
evenodd
この構文はCSS Masking Module Level 1 による最新の標準を反映しています。すべてのブラウザーがすべての部分を実装しているわけではありません。サポート情報についてはブラウザーの互換性を参照してください。

例

値の比較

この例では、類似の SVG<path> 要素に異なる CSSclip-rule 値を適用して、evenodd とnon-zero の値の違いを示します。

HTML

マークアップには複数の<svg> コンテナーがあり、それぞれ星の形を定義する<clipPath> 要素と、その中に星を描画する<rect> 要素が含まれています。星は、行を重ねて作成されています。id 以外は、最初の 2 つの SVG 要素のマークアップはまったく同じです。3 番目の SVG には<path> 要素のみが含まれており、星を作成したパスの行がどのように重なっているかがわかります。

html
<svg>  <clipPath>    <path d="M50,0 21,90 98,35 2,35 79,90z" />  </clipPath>  <rect clip-path="url(#star1)" width="95" height="95" /></svg><svg>  <clipPath>    <path d="M50,0 21,90 98,35 2,35 79,90z" />  </clipPath>  <rect clip-path="url(#star2)" width="95" height="95" /></svg><svg>  <path d="M50,0 21,90 98,35 2,35 79,90z" /></svg>

CSS

最初の SVG の<path> のclip-rule はevenodd に設定されています。2 つ目の SVG ではnonzero に設定されています。パスのみの SVG では、既定のfill を除去し、stroke 色とstroke-width を定義して、重なっているパス行を表示するようにしました。

body {  display: flex;  gap: 20px;}svg {  width: 110px;  height: 110px;}
css
#star1 path {  clip-rule: evenodd;}#star2 path {  clip-rule: nonzero;}#star3 path {  fill: none;  stroke: #000;  stroke-width: 1;}

結果

基本シェイプ定義の内部

この例は、clip-rule は CSS<basic-shape> には何の効果も持たないが、シェイプのソースとして使用される<clipPath> には影響を与えることを示しています。

HTML

星の形を定義する 2 つの<clipPath> 要素を含む SVG を記載します。これらの要素は、id 属性の値以外はすべて同じです。また、星の形を含む 2 つの<div> 要素も記載します。

html
<svg height="0" width="0">  <defs>    <clipPath>      <path d="M100,0 42,180 196,70 4,70 158,180z" />    </clipPath>    <clipPath>      <path d="M100,0 42,180 196,70 4,70 158,180z" />    </clipPath>  </defs></svg><div></div><div></div>

CSS

<div> 要素にwidth およびheight を設定し、conic-gradient() をbackground-image 値として追加します。

body {  display: flex;  gap: 20px;}
css
div {  height: 200px;  width: 200px;  background-image: conic-gradient(    at center,    rebeccapurple,    green,    lightblue,    rebeccapurple  );}

clip-path プロパティを使用して、それぞれの<div> のクリップパスとして、異なる<clipPath> 要素を設定します。

css
div:first-of-type {  clip-path: url(#star1);}div:last-of-type {  clip-path: url(#star2);}

最後に、<clipPath> 要素の<path> ごとに異なるclip-rule 値を設定します。

css
#star1 path {  clip-rule: evenodd;}#star2 path {  clip-rule: nonzero;}

結果

時計回りのパスすべてを含むパスに対するルールの選択

この SVG 画像には、2 つのクリップされた矩形があり、それぞれ 1 つのクリップルールが適用されています。 2 つの<clipPath> 要素があるため、 1 つは non-zero のクリップルールを使用するように設定し、もう 1 つは even-odd ルールを使用するように設定することができます。どちらのパスも、内側と外側の部分の両方で時計回りに描画されています。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">  <g stroke="#123" fill="#BCD">    <!-- 以下、基本的な長方形とクリップパスの視覚化 -->    <rect x="10" y="10" width="30" height="30" />    <path      d="M 65,5 l 20,20 -20,20 -20,-20 20,-20 m 0,10 l 10,10 -10,10 -10,-10 10,-10 z"      fill="none"      stroke-width="0.5" />    <!-- 以下、クリップされる長方形 -->    <rect x="110" y="10" width="30" height="30" clip-path="url(#clipper1)" />    <rect x="160" y="10" width="30" height="30" clip-path="url(#clipper2)" />  </g>  <!-- 以下、クリップするパス -->  <clipPath clipPathUnits="objectBoundingBox">    <path      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z"      clip-rule="evenodd" />  </clipPath>  <clipPath clipPathUnits="objectBoundingBox">    <path      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z"      clip-rule="nonzero" />  </clipPath></svg>

クリップされた長方形に適用されるクリップパスには、CSS のclip-rule プロパティを使用して、一方のパスにはnonzero ルール、もう一方のパスにはevenodd ルールを使用するように設定しています。これにより、CSS で意図的に CSS の設定と反対の値に設定されている SVG のclip-path 属性の値が上書きされます。

css
#clipper1 {  clip-rule: nonzero;}#clipper2 {  clip-rule: evenodd;}

パスの内側と外側の部分はどちらも時計回り（左から右）方向に移動するため、2 つのクリップルールでは、結果のクリップ形状が異なります。nonzero の場合、形状の外側部分にある光線は、1 つ以上の左から右へのパスフラグメントに遭遇するため、値が 0 以上の値になります。even-odd の場合、パスの 2 つの部分の間にある点は奇数、内側のパス内または外側の部分にある点は偶数の値になります。

巻き込み方向の異なるパスに対するルールの選択

この例では、前回の例と同じ SVG を使用していますが、クリップパスの内側が反時計回りに巻き込むように変更しています。

html
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 50">  <g stroke="#123" fill="#BCD">    <!-- 以下、基本的な長方形とクリップパスの視覚化 -->    <rect x="10" y="10" width="30" height="30" />    <path      d="M 65,5 l 20,20 -20,20 -20,-20 20,-20 m 0,10 l 10,10 -10,10 -10,-10 10,-10 z"      fill="none"      stroke-width="0.5" />    <!-- 以下、クリップされる長方形 -->    <rect x="110" y="10" width="30" height="30" clip-path="url(#clipper1)" />    <rect x="160" y="10" width="30" height="30" clip-path="url(#clipper2)" />  </g>  <!-- 以下、クリップするパス -->  <clipPath clipPathUnits="objectBoundingBox">    <path      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l -0.33,0.33 0.33,0.33 0.33,-0.33 -0.33,-0.33 z" />  </clipPath>  <clipPath clipPathUnits="objectBoundingBox">    <path      d="M 0.5 -0.15 l 0.65 0.65 -0.65,0.65 -0.65,-0.65 0.65,-0.65 m 0,0.33 l 0.33,0.33 -0.33,0.33 -0.33,-0.33 0.33,-0.33 z" />  </clipPath></svg>

前と同じ CSS を適用します。

css
#clipper1 {  clip-rule: nonzero;}#clipper2 {  clip-rule: evenodd;}

この場合、パスの外側の部分は時計回り（左から右）方向に移動し、パスの内側の部分は反時計回り（右から左）方向に移動するため、使用するクリップルールに関係なく、結果のクリップ形状は同じになります。

仕様書

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

ブラウザーの互換性

関連情報

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.

[8]ページ先頭
©2009-2025 Movatter.jp