CSS - clip-path
The clip-path
CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.
Example
/* inline SVG */ .target { clip-path: url(#c1); } /* external SVG */ .anothertarget { clip-path: url(resources.svg#c1); } /* circle */ .circleClass { clip-path: circle(15px at 20px 20px); }
Syntax
/* Keyword values */ clip-path: none; clip-path: fill-box; clip-path: stroke-box; clip-path: view-box; /* Image values */ clip-path: url(resources.svg#c1); /* 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%); /* Global values */ clip-path: inherit; clip-path: initial; clip-path: unset;
Values
<clip-source>
- Represents a URL referencing a clip path element.
<basic-shape>
- A basic shape function as defined in the CSS Shapes specification. A basic shape makes use of the specified reference box to size and position the basic shape. If no reference box is specified, the border-box will be used as reference box.
<geometry-box>
-
If specified in combination with a
<basic-shape>
, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined byborder-radius
) as clipping path. fill-box
-
Uses the object bounding box as reference box.
stroke-box
-
Uses the stroke bounding box as reference box.
view-box
-
Uses the nearest SVG viewport as 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 theviewBox
attribute and the dimension of the reference box is set to the width and height values of theviewBox
attribute. none
- There is no clipping path created.
Formal syntax
<a href="css/clip-path#clip-source"><clip-source></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/clip-path#basic-shape"><basic-shape></a> <a href="css/value_definition_syntax#double_bar" title="Double bar">||</a> <a href="css/clip-path#geometry-box"><geometry-box></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> none<p>where <br><code><clip-source> = <a href="css/url" title=""><url></a><br><basic-shape> = <a href="css/clip-path#inset()"><inset()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#circle()"><circle()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#ellipse()"><ellipse()></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#polygon()"><polygon()></a><br><geometry-box> = <a href="css/clip-path#shape-box"><shape-box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> fill-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> stroke-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> view-box</code></p><p>where <br><code><inset()> = inset( <a href="css/clip-path#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>1,4<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> round <border-radius> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><circle()> = circle( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/clip-path#shape-radius"><shape-radius></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><ellipse()> = ellipse( <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/clip-path#shape-radius"><shape-radius></a><a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">{</a>2<a href="css/value_definition_syntax#curly_braces_(.7b_.7d)" title="Curly braces">}</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> at <a href="css/position_value" title=""><position></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> )<br><polygon()> = polygon( <a href="css/clip-path#fill-rule"><fill-rule></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> , <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#hash_mark_(.23)" title="Hash mark">#</a> )<br><shape-box> = <a href="css/clip-path#box"><box></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> margin-box</code></p><p>where <br><code><length-percentage> = <a href="css/length" title="Possible values: a number followed by'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' or 'px', like 3px, 1.5cm, -0.5em or 0"><length></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/percentage" title=""><percentage></a><br><shape-radius> = <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> closest-side <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> farthest-side<br><position> = <a href="css/value_definition_syntax#brackets" title="Brackets">[</a><a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/clip-path#length-percentage"><length-percentage></a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> left <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> right <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/clip-path#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> && <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> center <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> <a href="css/value_definition_syntax#brackets" title="Brackets">[</a> top <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> bottom <a href="css/value_definition_syntax#brackets" title="Brackets">]</a> <a href="css/clip-path#length-percentage"><length-percentage></a><a href="css/value_definition_syntax#question_mark_(.3f)" title="Question mark">?</a> <a href="css/value_definition_syntax#brackets" title="Brackets">]</a><a href="css/value_definition_syntax#brackets" title="Brackets">]</a><br><fill-rule> = nonzero <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> evenodd<br><box> = border-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> padding-box <a href="css/value_definition_syntax#single_bar" title="Single bar">|</a> content-box</code></p>
Description
The clip-path
CSS property prevents a portion of an element from getting displayed by defining a clipping region to be displayed i.e, only a specific region of the element is displayed. The clipping region is a path specified as a URL referencing an inline or external SVG, or shape method such as circle(). The clip-path property replaces the now deprecated clip property.
Initial value | none |
---|---|
Applies to | all elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements |
Inherited | no |
Percentages | as specified |
Media | visual |
Computed value | as specified, but with url values made absolute |
Animation type | yes, as specified for <basic-shape> , otherwise no |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Browser Compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
On HTML elements | 24-webkit[1] | 3.5 (1.9.1) | No support | (Yes)-webkit[1] | ? |
<basic-shape> |
? | 47 (47)[2] | No support | ? | ? |
On SVG content | ? | No support[3] | No support | ? | ? |
inset() |
? | 51 (51)[2] | No support | ? | ? |
Animations | ? | 49 (49) | No support | ? | ? |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
On HTML elements | ? | 1.0 (1.9.1) | No support | ? | ? |
<basic-shape> |
? | 47.0 (47)[2] | No support | ? | ? |
On SVG content | ? | No support[3] | No support | ? | ? |
inset() |
? | 51.0 (51)[2] | No support | ? | ? |
Animations | ? | 49.0 (49) | No support | ? | ? |
[1] Chrome and Opera currently don't support external SVGs.
[2] This feature is implemented behind the preference layout.css.clip-path-shapes.enabled
, defaulting to false
. Basic shapes except inset()
got implemented in bug 1075457, inset()
got implemented in bug 1246762.
[3] This feature is not implemented yet. See bug 1246741.
See Also
- clip-rule,
mask
,filter
- Applying SVG effects to HTML content
clip-path
SVG attribute
Specifications
Specification | Status | Comment |
---|---|---|
CSS Masking Level 1 The definition of 'clip-path' in that specification. |
Candidate Recommendation | Extends its application to HTML elements |
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'clip-path' in that specification. |
Recommendation | Initial definition (applies to SVG elements only) |
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); }
JavaScript
var clipPathSelect = document.getElementById("clipPath"); clipPathSelect.addEventListener("change", function (evt) { document.getElementById("clipped").style.clipPath = evt.target.value; });
Result
License
© 2016 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-us/docs/web/css/clip-path