Clipping and masking allow you to subtract portions of elements in an SVG document.
Clipping paths, implemented with the clipPath
element, use any combination of paths, text elements, and basic shapes to serve as the outline of a simple mask. This means that everything on the inside of the clipPath
element's outline is visible and everything on the outside is cropped out. Every pixel in clipPath
is either on or off.
Masks, implemented with the mask
element, can contain graphics, text, and basic shapes to serve as a semi-transparent mask. With a mask, each pixel value indicates the degree of opacity and can range from being fully transparent to fully opaque.
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...