O'Reilly logo

Sams Teach Yourself SVG in 24 Hours by Micah Laaker

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required