<clipPath>

Defines a clipping path, which is used to clip the rendering of other elements using paths and shapes.

The clipping path is defined by the child elements of this element. Compared to <mask>, which uses image-based rendering and their white and black values to determine visibility, "<clipPath>" uses paths and shapes to define the clipping area.

This element is not rendered directly, but is referenced by other elements using the clip-path CSS property.

• DOM object: SVGClipPathElement
• SVG2 spec: https://drafts.fxtf.org/css-masking-1/#ClipPathElement

A <clipPath> defines a binary, geometry-based clipping region. Each pixel of the clipped element is either fully visible (if it falls inside the clip shape) or fully invisible (if it falls outside) - there is no partial transparency and no anti-aliased fade. The clipping region itself is built from ordinary SVG shapes (<rect>, <circle>, <path>, etc.) placed inside the <clipPath>; their union forms the visible area.

Declare a <clipPath> inside <defs> with an id, then apply it to any shape via the CSS clip-path: url(#id) property. For soft-edged, opacity-based, or luminance-driven masking - where pixels can be partially visible - use <mask> instead.

<defs>
 <clipPath id="myClipPath">
   <circle cx="100" cy="100" r="80"/>
   <rect x="100" y="100" width="80" height="80"/>
 </clipPath>
</defs>
 
<rect x="0" y="0" width="200" height="200" fill="purple" clip-path="url(#myClipPath)"/>

Attribute	Default	Description
clipPathUnits	userSpaceOnUse	Defines the coordinate system for the contents of the clipPath. Either userSpaceOnUse or objectBoundingBox.