SVG Essentials

Chapter 9. Clipping and Masking

Sometimes you don’t want to see an entire picture; for example, you might wish to draw a picture as though it were seen through binoculars or a keyhole; everything outside the boundary of the eyepieces or keyhole will be invisible. Or, you might want to set a mood by showing an image as though viewed through a translucent curtain. SVG accomplishes such effects with clipping and masking.

Clipping to a Path

When you create an SVG document, you establish its viewport by specifying the width and height of the area you’re interested in. This automatically becomes your clipping area; anything drawn outside these limits will not be displayed. You can establish a clipping area of your own with the <clipPath> element. Here’s the simplest case: establishing a rectangular clip path. Inside the <clipPath> element will be the <rect> we wish to clip to. The rectangle itself is not displayed; we only love it for its coordinates. Thus, we are free to add any fill or stroke styles we wish to the elements within the <clipPath>. On the object to be clipped we add a clip-path style property whose value references the <clipPath> element. Note that the property is hyphenated and not capitalized; the element is capitalized and not hyphenated. In Example 9-1, the object being clipped is a small version of the cat picture from Chapter 1, producing Figure 9-1.

Example 9-1. Clipping to a rectangular path

<defs> <clipPath id="rectClip"> <rect id="rect1" x="15" y="15" width="40" ...