Clipping

To let content appear only through a specific shape, you'll need to take advantage of clipping paths. In Hour 7, you learned to fill a container with a pattern. Clipping paths are similar in concept, minus the repeating tiles.

Clipping paths require two components:

  • A clipPath element

  • A clip-path style property

The clipPath element contains the graphics that will serve as the content for the “keyhole” shape. This graphic content resides between <clipPath> and </clipPath> tags. Naming your clipPath element will allow it to be applied to other objects.

The style declaration used to apply a clipping path consists of clip-path:url(#ClipID), where “ClipID” is most often the name of the clipping path's id value. Applying this style declaration ...

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