clip-path

clip-path CSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.

구문

/* 키워드 값 */
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> 값으로 크기와 위치가 정해지는 도형. <geometry-box>를 지정하지 않는다면 border-box를 참조 박스로 사용합니다.
<geometry-box>
<basic-shape>와 함께 지정하면, <basic-shape>의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태(border-radius 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.
margin-box
바깥 여백 상자를 참조로 사용합니다.
border-box
테두리 상자를 참조로 사용합니다.
padding-box
안쪽 여백 상자를 참조로 사용합니다.
content-box
콘텐츠 상자를 참조로 사용합니다.
fill-box
객체의 바운딩 상자를 참조로 사용합니다.
stroke-box
테두리 바운딩 상자를 참조로 사용합니다.
view-box
가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가 viewBox 속성을 가진 경우, 참조 상자의 위치는 viewBox 속성이 정의하는 좌표계의 원점에 위치하고, 크기는 viewBox 속성의 너비와 높이 값과 동일합니다.
none
클리핑 패스를 생성하지 않습니다.

참고: opacity가 1이 아닌 값일 때와 마찬가지로, none 외의 계산값은 새로운 쌓임 맥락을 생성합니다.

형식 구문

<clip-source> | [ <basic-shape> || <geometry-box> ] | none
where 
<clip-source> = <url>
<basic-shape> = <inset()> | <circle()> | <ellipse()> | <polygon()> | <path()>
<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> ]# )
<path()> = path( [ <fill-rule>, ]? <string> )
<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

예제

HTML과 SVG의 차이점

완전한 예제

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);
}

결과

명세

Specification Status Comment
CSS Masking Module Level 1
The definition of 'clip-path' in that specification.		 Candidate Recommendation Extends its application to HTML elements. The clip-path property replaces the deprecated clip property.
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'clip-path' in that specification.		 Recommendation Initial definition (applies to SVG elements only).
CSS Shapes Module Level 2
The definition of 'path' in that specification.		 Editor's Draft Defines path().
초기값none
적용대상all elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
상속no
Percentagesrefer to reference box when specified, otherwise border-box
Computed valueas specified, but with <url> values made absolute
Animation typeyes, as specified for basic-shape, otherwise no

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clip-pathChrome Full support 55
Full support 55
Full support 23
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12
Notes
Full support 12
Notes
Notes Edge only supports clip paths defined by url().
Firefox Full support 3.5IE Full support 10
Notes
Full support 10
Notes
Notes Internet Explorer only supports clip paths defined by url().
Opera Full support 42
Full support 42
Full support 15
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9.1
Full support 9.1
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android Full support 55
Full support 55
Full support ≤37
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Chrome Android Full support 55
Full support 55
Full support 25
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android Full support 4Opera Android Full support 42
Full support 42
Full support 14
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 9.3
Full support 9.3
Full support 6.1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Samsung Internet Android Full support 6.0
Full support 6.0
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
AnimationsChrome Full support 55Edge Full support 79Firefox Full support 49IE No support NoOpera Full support 42Safari No support NoWebView Android Full support 55Chrome Android Full support 55Firefox Android Full support 49Opera Android Full support 42Safari iOS No support NoSamsung Internet Android Full support 6.0
<basic-shape>Chrome Full support 23Edge Full support 79Firefox Full support 54
Full support 54
No support 47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 54
Full support 54
No support 47 — 54
Disabled
Disabled From version 47 until version 54 (exclusive): this feature is behind the layout.css.clip-path-shapes.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
fill-box and stroke-boxChrome No support NoEdge No support NoFirefox Full support 51
Notes
Full support 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 51
Notes
Full support 51
Notes
Notes This value was supported before Firefox 51, but as an alias to border-box.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
On HTML elementsChrome Full support 23Edge Full support 79Firefox Full support 3.5IE No support NoOpera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 4Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5
path()Chrome No support NoEdge No support NoFirefox Full support 71
Full support 71
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android Full support 63
Disabled
Full support 63
Disabled
Disabled From version 63: this feature is behind the layout.css.clip-path-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
On SVG elementsChrome Full support 23Edge Full support 12Firefox Full support 52IE Full support 10Opera Full support 15Safari Full support 6.1WebView Android Full support 4.4Chrome Android Full support 25Firefox Android Full support 52Opera Android Full support 14Safari iOS Full support 6.1Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

같이 보기