clip-path

SVG Elements
1. A
2. B-C
3. D
  1. <defs>
  2. <desc>
4. E
  1. <ellipse>
5. F
6. G
7. H
  1. <hkern>
8. I
  1. <image>
9. J-L
  1. <line>
  2. <linearGradient>
10. M
11. N-P
12. Q-R
  1. <radialGradient>
  2. <rect>
13. S
  1. <script>
  2. <set>
  3. <stop>
  4. <style>
  5. <svg>
  6. <switch>
  7. <symbol>
14. T
15. U
  1. <use>
16. V-Z
  1. <view>
  2. <vkern>

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:

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>

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

Browser compatibility

BCD tables only load in the browser