SVG Essentials, 2nd Edition

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.^[16] 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> 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

http://oreillymedia.github.io/svg-essentials-examples/ch10/clip_path.html ...