The clip-path
presentation attribute defines or associates a clipping path with the element it is related to.
Note: As a presentation attribute clip-path
can be used as a CSS property.
As a presentation attribute, it can be applied to any element but it has noticeable effects mostly on the following nineteen elements: <a>
, <circle>
, <clipPath>
, <ellipse>
, <g>
, <glyph>
, <image>
, <line>
, <marker>
, <mask>
, <path>
, <pattern>
, <polygon>
, <polyline>
, <rect>
, <svg>
, <symbol>
, <text>
, <use>
html,body,svg { height:100% }
<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <clipPath id="myClip" clipPathUnits="objectBoundingBox"> <circle cx=".5" cy=".5" r=".5" /> </clipPath> <!-- Top-left: Apply a custom defined clipping path --> <rect x="1" y="1" width="8" height="8" stroke="green" clip-path="url(#myClip)" /> <!-- Top-right: Apply a CSS basic shape on a fill-box geometry. This is the same as having a custom clipping path with a clipPathUnits set to objectBoundingBox --> <rect x="11" y="1" width="8" height="8" stroke="green" clip-path="circle() fill-box" /> <!-- Bottom-left --> <rect x="1" y="11" width="8" height="8" stroke="green" clip-path="circle() stroke-box" /> <!-- Bottom-right: Apply a CSS basic shape on a view-box geometry. This is the same as having a custom clipping path with a clipPathUnits set to userSpaceOnUse --> <rect x="11" y="11" width="8" height="8" stroke="green" clip-path="circle() view-box" /> </svg>
Usage notes
Value | <url> | [ <basic-shape> || <geometry-box> ] | none |
---|---|
Default value | none |
Animatable | Yes |
- <geometry-box>
- An extra information to tell how a
<basic-shape>
is applied to an element:fill-box
indicates to use the object bounding box;stroke-box
indicates to use the object bounding box extended with the stroke;view-box
indicates to use the nearest SVG viewport as the reference box.
Note: For more details on the clip-path syntax, see the CSS property clip-path
reference page.
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
clip-path | Chrome ? | Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android ? | Chrome Android ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android ? |
Legend
- Compatibility unknown
- Compatibility unknown
Specifications
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). |
See also
- The CSS
clip-path
property