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

<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)"/>