clip-path

ここへジャンプ:
  1. Syntax
  2. Examples
  3. Live sample
  4. Specifications
  5. Browser compatibility
  6. See also

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

clip-path CSS プロパティは要素のどの部分を表示するかを定義するクリッピング領域を作ります。クリッピング領域の内側が表示され、外側は隠されます。クリッピング領域はインラインや外部 SVG を参照する URL、または circle() のようなシェイプとして指定されたパスです。

Historical Note: 廃止された clip プロパティから clip-path プロパティに置き換えられました。

/* Keyword values */
clip-path: none;

/* Image values */ 
clip-path: url(resources.svg#c1);

/* Box values */
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;

/* Geometry values */
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

/* Box and geometry values combined */
clip-path: padding-box circle(50px at 0 100px);

/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: unset;

初期値none
適用対象all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
継承不可
相対値の基準refer to reference box when specified, otherwise border-box
メディアvisual
計算値as specified, but with url values made absolute
Animation typeyes, as specified for basic-shape, otherwise no
正規順序形式文法で定義される一意のあいまいでない順序

Syntax

clip-path プロパティは次の値の1つまたは組み合わせで構成されます。

Values

url()
Represents a URL referencing a clipping path element.
inset(), circle(), ellipse(), polygon()
A <basic-shape> function. The size and position of the shape is defined by the <geometry-box> value. If no geometry box is specified, the border-box will be used as the reference box.
<geometry-box>
If specified in combination with a <basic-shape>, this value defines the reference box for the basic shape. If specified by itself, it causes the edges of the specified box, including any corner shaping (such as a border-radius), to be the clipping path. The geometry box can be one of the following values:
fill-box
Uses the object bounding box as the reference box.
stroke-box
Uses the stroke bounding box as the reference box.
view-box
Uses the nearest SVG viewport as the reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the size of the reference box is set to the width and height values of the viewBox attribute.
margin-box
Uses the margin box as the reference box.
border-box
Uses the border box as the reference box.
padding-box
Uses the padding box as the reference box.
content-box
Uses the content box as the reference box.
none
No clipping path is created.

Formal syntax

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()>
<geometry-box> = <shape-box> | fill-box | stroke-box | view-box
where 
<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-box
where 
<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

Examples

/* Inline SVG  */
.target {
  clip-path: url(#c1);
}

/* External SVG */
.anothertarget {
  clip-path: url(resources.svg#c1);
}

/* Circle shape */
.circleClass {
  clip-path: circle(15px at 20px 20px);
}

Live sample

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>
</select>

CSS

#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}

Result

Specifications

Specification Status Comment
CSS Masking Module Level 1
clip-path の定義		 勧告候補 Extends its application to HTML elements.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
clip-path の定義		 勧告 Initial definition (applies to SVG elements only).

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
On HTML elements 24-webkit[1]
55.0		 未サポート[2] 3.5 (1.9.1) 未サポート (有)-webkit[1] 未サポート[3]
<basic-shape> 55.0 未サポート[2] 54 (54)[5] 未サポート 42.0 未サポート[3]
On SVG content 55.0 20 (12.10240)[4] 52 (52)[6] (有)[4] 42.0 未サポート[3]
inset() 55.0 未サポート[2] 54 (54)[5] 未サポート 42.0 未サポート[3]
Animations 55.0 未サポート[2] 49 (49) 未サポート 42.0 未サポート[3]
fill-box and stroke-box 未サポート 未サポート[2] 51 (51)[7] 未サポート 未サポート 未サポート[3]
Feature Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
On HTML elements 55.0 55.0 未サポート 1.0 (1.9.1) 未サポート ? 未サポート[3] (有) -webkit
55.0
<basic-shape> 55.0 55.0 未サポート 54.0 (54)[5] 未サポート ? 未サポート[3] 55.0
On SVG content 55.0 55.0 20 (12.10240)[4] 52.0 (52)[6] 未サポート ? 未サポート[3] 55.0
inset() 55.0 55.0 未サポート 54.0 (54)[5] 未サポート ? 未サポート[3] 55.0
Animations 55.0 55.0 未サポート 49.0 (49) 未サポート ? 未サポート[3] 55.0
fill-box and stroke-box 未サポート 未サポート 未サポート 51 (51)[7] 未サポート ? 未サポート[3] 未サポート

[1] Chrome and Opera currently don't support external SVGs.

[2] Edge doesn't support this feature yet. This is requested on the Edge User Voice page. See also the Edge Development page.

[3] Safari doesn't support this feature yet. See WebKit bug 126207.

[4] Internet Explorer and Edge currently only support clip paths defined via url().

[5] This feature was implemented behind the preference layout.css.clip-path-shapes.enabled, defaulting to false, since Gecko 47 (Firefox 47.0 / Thunderbird 47.0 / SeaMonkey 2.44). Basic shapes except inset() got implemented in バグ 1075457, inset() got implemented in バグ 1246762. Since Gecko 53 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) the preference defaulted to true on Nightly and Developer Edition (バグ 1303654), since Gecko 54 (Firefox 54.0 / Thunderbird 54.0 / SeaMonkey 2.51) it also defaults to true on Beta and Stable releases バグ 1247229.

[6] This feature got implemented in バグ 1246741.

[7] Before Firefox 51, fill-box and stroke-box where aliases for border-box.

See also

ドキュメントのタグと貢献者

 このページの貢献者: uknmr
 最終更新者: uknmr,