Mastering SVG

Clipping

The clipPath element in SVG allows you to cut a shape out of another shape. Clipping uses the geometry of the shape to define the area that's cut out. It doesn't take into account anything other than the shape, so attributes such as stroke and fill don't change the area being cut out.

The following code sample shows a very simple, but very useful, pattern for using the clipPath element. The basic effect is to cut out one half of a complicated element (the star we drew in Chapter 2, Getting Started with Authoring SVG) in order to lay it on top of another instance of that same star creating a bisected star design in red and black. While you could create two halves of the star and place them next to each other, mixing and matching instances ...