Skip to Main Content
SVG for Web Developers
book

SVG for Web Developers

by Ellen Pearlman, Lorien House
December 2002
Beginner to intermediate content levelBeginner to intermediate
464 pages
8h 34m
English
Pearson
Content preview from SVG for Web Developers

Clipping

Creating cut-out effects in SVG is referred to as clipping and is made by creating a shape to use as a stencil, then applying that shape to the object being clipped. The stencil is referred to as a clipping path, and, when it is applied to an object, acts as a boundary that allows only part of the object inside the clipping path to be viewed.

Figure 7-1 shows a verse from “The Song of Wandering Angus,” by W.B. Yeats on the left side. On the right side, an oval clipping path is applied to the text verse. Only the part of the text that is within the oval clipping path's boundaries is visible.

Figure 7-1. CLIP01.SVG. On the left is a text verse; on the right is an oval clipping path applied to the text.

A clipping path such as the one in ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Building Web Applications with SVG

Building Web Applications with SVG

Jon Frost David Dailey and Domenico Strazzullo
SVG Text Layout

SVG Text Layout

Amelia Bellamy-Royds, Kurt Cagle
Using SVG with CSS3 and HTML5

Using SVG with CSS3 and HTML5

Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey

Publisher Resources

ISBN: 0131004999Purchase book