Generating a Multi-Gradient Checkerboard

---

Using the SVG clippath Element

The SVG document in Listing 4.7 demonstrates how to use the SVG clipPath element in order to define a 'clip path' that specifies the dimensions and border of a region. When this clip path is specified in an SVG component, only the portion of the component that lies inside the clip path will be rendered.

Listing 4.7 clipPathDef1.svg

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"  "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd"> <svg> <defs>   <clipPath              clipPathUnits="userSpaceOnUse">     <path d="m0,200 l100,-100 100,100 -100,100z"/>   </clipPath> </defs> </svg>

Remarks

You can think of a clip path as a 'window' that restricts the view of a graphics image to only the portion that is contained inside the 'window.' The SVG defs element in Listing 4.7 contains a clip path identified via an id attribute with the value of clipPathDefinition. This clip path defines a diamond pattern (a rhombus, to be precise) starting from the left-most vertex and then specifying the other three vertices by moving in a clockwise fashion. You use the id value in order to specify this clip path definition when rendering other SVG components. Note that if you double-click on this file, you will not see anything in your browser; it is simply the definition of a clip path. The next example shows you how to specify this clip path definition and reference it while rendering a set of rectangles.

---