CSS の clip-path
プロパティは、要素のどの部分を表示するかを設定するクリッピング領域を作ります。具体的には、領域の内部の部分は表示され、外側の部分は非表示になります。
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
構文
/* キーワード値 */ clip-path: none; /* <clip-source> 値 */ clip-path: url(resources.svg#c1); /* <geometry-box> 値 */ clip-path: margin-box; clip-path: border-box; clip-path: padding-box; clip-path: content-box; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* <basic-shape> 値 */ clip-path: inset(100px 50px); clip-path: circle(50px at 0 100px); clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z'); /* ボックスおよびシェイプ値の組み合わせ */ clip-path: padding-box circle(50px at 0 100px); /* グローバル値 */ clip-path: inherit; clip-path: initial; clip-path: unset;
clip-path
プロパティは、以下に挙げた値のうちの一つまたは組み合わせで指定します。
値
<clip-source>
- SVG の
<clipPath>
要素を参照する<url>
です。 <basic-shape>
<geometry-box>
値で寸法と位置が定義されるシェイプです。ジオメトリボックスが指定されない場合、参照ボックスとしてborder-box
が使用されます。<geometry-box>
<basic-shape>
と共に指定された場合、この値は基本シェイプの参照ボックスを定義します。単独で指定された場合、指定のボックスの辺を、角の形 (border-radius
など) を含めてクリッピングパスにします。ジオメトリボックスは以下の値のうちの一つが指定できます。-
margin-box
- マージンボックスを参照ボックスとして使用します。
border-box
- 境界ボックスを参照ボックスとして使用します。
padding-box
- パディングボックスを参照ボックスとして使用します。
content-box
- コンテンボックスを参照ボックスとして使用します。
fill-box
- オブジェクトの境界ボックスを参照ボックスとして使用します。
stroke-box
- ストロークの境界ボックスを参照ボックスとして使用します。
view-box
- 最も近い SVG のビューポートを参照ボックスとして使用します。 SVG のビューポートを作成する要素に
viewBox
属性が指定されている場合、参照ボックスはviewBox
属性で指定された座標系の原点に位置し、参照ボックスの寸法はviewBox
属性の width および height 値に設定されます。
none
- クリッピングパスは作成されません。
メモ: 計算値が none
以外の場合は、 opacity
が 1 以外の値の場合と同様、新しい重ね合わせコンテキストを生成します。
形式文法
<clip-source> | [ <basic-shape> || <geometry-box> ] | nonewhere
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-boxwhere
<inset()> = inset( <length-percentage>{1,4} [ round <'border-radius'> ]? )
<circle()> = circle( [ <shape-radius> ]? [ at <position> ]? )
<ellipse()> = ellipse( [ <shape-radius>{2} ]? [ at <position> ]? )
<polygon()> = polygon( <fill-rule>? , [ <length-percentage> <length-percentage> ]# )
<shape-box> = <box> | margin-boxwhere
<length-percentage> = <length> | <percentage>
<shape-radius> = <length-percentage> | closest-side | farthest-side
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]
<fill-rule> = nonzero | evenodd
<box> = border-box | padding-box | content-box
例
HTML と SVG の比較
<svg class="defs"> <defs> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" /> </clipPath> </defs> </svg> <div class="grid"> <div class="col"> <div class="note">clip-path: none</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="none"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="none"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: url(#myPath)<br><br> Assuming the following clipPath definition: <pre> <svg> <clipPath id="myPath" clipPathUnits="objectBoundingBox"> <path d="M0.5,1 C 0.5,1,0,0.7,0,0.3 A 0.25,0.25,1,1,1,0.5,0.3 A 0.25,0.25,1,1,1,1,0.3 C 1,0.7,0.5,1,0.5,1 Z" /> </clipPath> </svg></pre> </div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="svg"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z') </div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="svg2"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="svg2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: circle(25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape1"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape1"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape2"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape2"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape3"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape3"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape4"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape4"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: view-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape5"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape5"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape6"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape6"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: border-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape7"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape7"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape8"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape8"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> <div class="note">clip-path: content-box circle(25% at 25% 25%)</div> <div class="row"> <div class="cell"> <span>HTML</span> <div class="container"> <p class="shape9"> I LOVE<br><em>clipping</em> </p> </div> </div> <div class="cell"> <span>SVG</span> <div class="container viewbox"> <svg viewBox="0 0 192 192"> <g class="shape9"> <rect x="24" y="24" width="144" height="144" /> <text x="96" y="91">I LOVE</text> <text x="96" y="109" class="em">clipping</text> </g> </svg> </div> </div> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { flex: 1 auto; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; flex: 1; } .note { background: #fff3d4; padding: 1em; margin: .5em .5em 0; font: .8em sans-serif; text-align: left; white-space: nowrap; } .note + .row .cell { margin-top: 0; } .container { display: inline-block; border: 1px dotted grey; position:relative; } .container:before { content: 'margin'; position: absolute; top: 2px; left: 2px; font: italic .6em sans-serif; } .viewbox { box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset; } .container.viewbox:after { content: 'viewbox'; position: absolute; left: 1.1rem; top: 1.1rem; font: italic .6em sans-serif; } .cell span { display: block; margin-bottom: .5em; } p { font-family: sans-serif; background: #000; color: pink; margin: 2em; padding: 3em 1em; border: 1em solid pink; width: 6em; } .none { clip-path: none; } .svg { clip-path: url(#myPath); } .svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');} .shape1 { clip-path: circle(25%); } .shape2 { clip-path: circle(25% at 25% 25%); } .shape3 { clip-path: fill-box circle(25% at 25% 25%); } .shape4 { clip-path: stroke-box circle(25% at 25% 25%); } .shape5 { clip-path: view-box circle(25% at 25% 25%); } .shape6 { clip-path: margin-box circle(25% at 25% 25%); } .shape7 { clip-path: border-box circle(25% at 25% 25%); } .shape8 { clip-path: padding-box circle(25% at 25% 25%); } .shape9 { clip-path: content-box circle(25% at 25% 25%); } .defs { width: 0; height: 0; margin: 0; } pre { margin-bottom: 0; } svg { margin: 1em; font-family: sans-serif; width: 192px; height: 192px; } svg rect { stroke: pink; stroke-width: 16px; } svg text { fill: pink; text-anchor: middle; } svg text.em { font-style: italic; }
完全な例
HTML
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN logo"> <svg height="0" width="0"> <defs> <clipPath id="cross"> <rect y="110" x="137" width="90" height="90"/> <rect x="0" y="110" width="90" height="90"/> <rect x="137" y="0" width="90" height="90"/> <rect x="0" y="0" width="90" height="90"/> </clipPath> </defs> </svg> <select id="clipPath"> <option value="none">none</option> <option value="circle(100px at 110px 100px)">circle</option> <option value="url(#cross)" selected>cross</option> <option value="inset(20px round 20px)">inset</option> <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option> </select>
CSS
#clipped { margin-bottom: 20px; clip-path: url(#cross); }
JavaScript
var clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; });
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Masking Module Level 1 clip-path の定義 |
勧告候補 | 適用範囲を HTML 要素に拡張。 clip-path プロパティが非推奨の clip プロパティを置き換えた。 |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) clip-path の定義 |
勧告 | 初回定義 (SVG 要素のみに適用)。 |
初期値 | none |
---|---|
適用対象 | すべての要素。 SVG では、 defs 要素及びすべてのグラフィック要素を除いたコンテナー要素に適用されます。 |
継承 | なし |
パーセンテージ | refer to reference box when specified, otherwise border-box |
メディア | 視覚 |
計算値 | as specified, but with url values made absolute |
アニメーションの種類 | yes, as specified for basic-shape , otherwise no |
正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
デスクトップ | モバイル | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-path | Chrome
完全対応
55
| Edge
完全対応
12
| Firefox 完全対応 3.5 | IE
完全対応
10
| Opera
完全対応
42
| Safari
完全対応
9.1
| WebView Android
完全対応
55
| Chrome Android
完全対応
55
| Firefox Android 完全対応 4 | Opera Android
完全対応
42
| Safari iOS
完全対応
9.3
| Samsung Internet Android
完全対応
6.0
|
Animations | Chrome 完全対応 55 | Edge 未対応 なし | Firefox 完全対応 49 | IE 未対応 なし | Opera 完全対応 42 | Safari 未対応 なし | WebView Android 完全対応 55 | Chrome Android 完全対応 55 | Firefox Android 完全対応 49 | Opera Android 完全対応 42 | Safari iOS 未対応 なし | Samsung Internet Android 完全対応 6.0 |
<basic-shape> | Chrome 完全対応 23 | Edge 未対応 なし | Firefox
完全対応
54
| IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 6.1 | WebView Android 完全対応 4.4 | Chrome Android 完全対応 25 | Firefox Android
完全対応
54
| Opera Android 完全対応 14 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.5 |
fill-box and stroke-box | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
51
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
51
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
On HTML elements | Chrome 完全対応 23 | Edge 未対応 なし | Firefox 完全対応 3.5 | IE 未対応 なし | Opera 完全対応 15 | Safari 完全対応 6.1 | WebView Android 完全対応 4.4 | Chrome Android 完全対応 25 | Firefox Android 完全対応 4 | Opera Android 完全対応 14 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.5 |
path() | Chrome 未対応 なし | Edge 未対応 なし | Firefox
完全対応
71
| IE 未対応 なし | Opera 未対応 なし | Safari 未対応 なし | WebView Android 未対応 なし | Chrome Android 未対応 なし | Firefox Android
完全対応
63
| Opera Android 未対応 なし | Safari iOS 未対応 なし | Samsung Internet Android 未対応 なし |
On SVG elements | Chrome 完全対応 23 | Edge 完全対応 12 | Firefox 完全対応 52 | IE 完全対応 10 | Opera 完全対応 15 | Safari 完全対応 6.1 | WebView Android 完全対応 4.4 | Chrome Android 完全対応 25 | Firefox Android 完全対応 52 | Opera Android 完全対応 14 | Safari iOS 完全対応 6.1 | Samsung Internet Android 完全対応 1.5 |
凡例
- 完全対応
- 完全対応
- 未対応
- 未対応
- 実装ノートを参照してください。
- 実装ノートを参照してください。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- ユーザーが明示的にこの機能を有効にしなければなりません。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
- 使用するには、ベンダー接頭辞または異なる名前が必要です。
関連情報
- Shapes in clipping and masking – and how to use them
- CSS プロパティ:
mask
,filter
- SVG 効果の HTML コンテンツへの適用
- SVG 属性:
clip-path
,clip-rule