Like clipping paths, masks are used to hide and reveal parts of graphics and other elements. The difference is where clipping paths either show elements as fully opaque or fully transparent, masks allow you to control the degree of transparency or opacity. Where a clipping path leave every pixel as 0% or 100% opaque, masks can be 42% or 68% or any other percent opaque for any pixel in the mask.
Last week I walked through a few examples using the path element and the text element as clipping paths. I also showed you how to clip elements inside a group as opposed to individually.
The last couple of weeks, I’ve been talking about SVG clipping paths and their attributes. So far in the series I’ve stuck to rectangles as the path in order to keep things simple, however you aren’t limited to using rectangles. In fact clipping paths become a lot more interesting when they aren’t rectangular or when you clip something more than a simple shape.