index.md

---

title: clip-path
slug: Web/SVG/Attribute/clip-path
page-type: svg-attribute
tags:
  - SVG
  - SVG Attribute
browser-compat: svg.attributes.presentation.clip-path

---

{{SVGRef}}

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.

You can use this attribute with the following SVG elements:

• {{SVGElement('a')}}

• {{SVGElement('circle')}}

• {{SVGElement('clipPath')}}

• {{SVGElement('ellipse')}}

• {{SVGElement('g')}}

• {{SVGElement('glyph')}}

• {{SVGElement('image')}}

• {{SVGElement('line')}}

• {{SVGElement('marker')}}

• {{SVGElement('mask')}}

• {{SVGElement('path')}}

• {{SVGElement('pattern')}}

• {{SVGElement('polygon')}}

• {{SVGElement('polyline')}}

• {{SVGElement('rect')}}

• {{SVGElement('svg')}}

• {{SVGElement('symbol')}}

• {{SVGElement('text')}}

• {{SVGElement('use')}}

Example

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>

{{EmbedLiveSample("Example", '100%', 200)}}

Usage notes

Value	{{cssxref('url')}} | [ {{cssxref('basic-shape')}} || <geometry-box> ] | none
Default value	none
Animatable	Yes

• <geometry-box>

  • : An extra information to tell how a {{cssxref('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 {{cssxref('clip-path')}} reference page.

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}

See also

• The CSS {{cssxref("clip-path")}} property