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

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

Specifications

Specification
CSS Masking Module Level 1> # the-clip-path>

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`clip-path`	23	12	52	15	7	25	52	14	7	1.5	4.4	7

clip-path

Example

Usage notes

Specifications

Browser compatibility

See also