A clipPath defines a region of an element thats visible. Once a clipPath has been applied, anything "outside" the clip path isn't drawn by the browser.
Here's a pattern with no clip path applied:
And here's the same pattern with a circular clip path applied:
The clip path's shape is defined using the <clipPath> element, and the clip-path attribute, used by the element applying the clip path.
1
2
3
4
5
6
7
8
<defs>
<clipPath id="circ_CP">
<circle cx="250" cy="250" r="150" />
</clipPath>
...
</defs>
<rect ... clip-path="url(#circ_CP)" />id: Used to identify and apply the clip path
<clipPath id="clip-path-id">
clip-path: Used to apply the clip path
<rect ... clip-path="url(#clip-path-id)" />
The clipPath element can contain simple shapes, paths, or a combination thereof.