Chapter 10. 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 becomes by default your clipping area; anything drawn outside these limits will not be displayed. You can establish a clipping area of your own with the
Here’s the simplest case: establishing a rectangular clip path. Inside the
<clipPath> element will be the
<rect> you want to clip to. The rectangle itself is not displayed; we only love it for its coordinates. Thus, you are free to add any fill or stroke styles you wish to the elements within the
<clipPath>. On the object to be clipped, you 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 10-1, the object being clipped is a small version of the cat picture from Chapter 1. The result is in Figure 10-1.
Example 10-1. Clipping to a rectangular path