clip-path

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨March 2017⁩.

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 also has a CSS property counterpart: clip-path. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

Example

html, body, svg { height: 100%; }

html

<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.