clip-path

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: {{cssxref("clip-path")}}. When both are specified, the CSS property takes priority.

You can use this attribute with the following SVG elements:

{{SVGElement('a')}}
{{SVGElement('circle')}}
{{SVGElement('clipPath')}}
{{SVGElement('ellipse')}}
{{SVGElement('g')}}
{{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

css

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

<table class="properties"> <tbody> <tr> <th scope="row">Value</th> <td> {{CSSXref("url_value", "<url>")}} | [ {{cssxref('basic-shape')}} || <code><geometry-box></code> ] | <code>none</code> </td> </tr> <tr> <th scope="row">Default value</th> <td><code>none</code></td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> </tbody> </table>

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

Example

Usage notes

Specifications

Browser compatibility

See also