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 ...