Elements: Clipped Path

Clipped Path (AKA clipPath)

A clipPath is the path of an SVG shape that can be used in combination with another shape to remove any parts of the combined shapes that don’t fall within the clipPath. That sounds slightly confusing, so we will break it down to hopefully clarify the explanation.

Let’s imagine that we want to display the intersection of two shapes. What we will do is define our clipPath, which will act as a “cookie-cutter,” that can cut out the shape we want (we will choose an ellipse). Then we will draw our base shape (which is analogous to the dough) that we will use our cookie cutter on (our dough will be shaped like a rectangle). The intersection of the cookie cutter and the dough is our clipped path.

Our clipPath (cookie cutter) element is an ellipse: