Masking

Masking relies on the following three components to operate:

  • The mask style property

  • The mask element

  • The mask content, which determines the level of opacity

The mask style declaration consists of mask:url(#MaskID), where MaskID is most often the value of the mask's id attribute.

The mask element is most similar to the rect element, as it uses the x, y, width, and height attributes to define its maximum boundaries. Within the mask element is the mask content. This content is used to resolve what amount of artwork below the mask is visible and in what locations.

As mentioned earlier this hour, a mask uses the values of its content's colors (the objects within the mask element) to determine what artwork peeks through and what does not. This ...

Get Sams Teach Yourself SVG in 24 Hours now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial