Mastering SVG

Masking

Masking, in contrast to clipping, takes account of attributes beyond the simple shape of the element being cut out. As was mentioned, you leverage the full range of transparent, semi-transparent, or fully opaque pixels. This allows for interesting effects.

The following example shows how multiple masks can be used together. In this example, we make heavy use of the defs section and then compose an image using different reusable elements.

For starters, we create two gradients. One is a linear gradient that has five steps, mostly black, which creates a very intense band of white in the middle of the gradient. The second is a radial gradient, which has a central area of black surrounded by a very large circle of white. Using these for ...