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

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

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