clippath and rect Elements with Gradient Grid Patterns

---

Generating Slanted Venetian Gradient Patterns

Consider the slanted Venetian gradient checkerboard pattern rendered in Figure 4.8.

Figure 4.8: A slanted Venetian gradient pattern.

The SVG document in Listing 4.10 uses the SVG elements linearGradient and rect in order to render a slanted Venetian gradient rectangular pattern.

Listing 4.10 sVenetianMultiRect1.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 width="100%" height="100%">   <defs>   <linearGradient       x1="0" y1="0" x2="40" y2="40"      gradientUnits="userSpaceOnUse"      spreadMethod="repeat"> <stop offset="0%" style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient>   <linearGradient       x1="0" y1="0" x2="40" y2="40"      gradientUnits="userSpaceOnUse"      spreadMethod="repeat">      <stop offset="20%" style="stop-color:#0000FF"/>      <stop offset="80%" style="stop-color:#000000"/>   </linearGradient>   </defs>   <rect      x="0" y="0" width="160" height="160"    style="fill:url(#redGradientDefinition);stroke:none"/>   <rect      x="160" y="0" width="160" height="160"   style="fill:url(#blueGradientDefinition);stroke:none"/>   <rect      x="0" y="160" width="160" height="160"   style="fill:url(#blueGradientDefinition);stroke:none"/>   <rect      x="160" y="160" width="160" height="160"    style="fill:url(#redGradientDefinition);stroke:none"/> </svg>

Remarks

The SVG defs element in Listing 4.10 contains two linear gradients with id values of redGradientDefinition and blueGradientDefinition. One linear gradient defines a color gradient from red to black and the other defines a color gradient from blue to black. Both of these color gradients are diagonal because of the following line in their definition:

   x1="0" y1="0" x2="40" y2="40"

The path for this gradient specifies a set of diagonal lines that move from the upper-left vertex (0,0) to the lower-right vertex (40,40), thereby creating a diagonal shading effect.

The four SVG rect elements define a 2x2 rectangular grid pattern consisting of four rectangles that have a side length of 160, whose color alternates between the two linear gradients by specifying,

     style="fill:url(#blueGradientDefinition);stroke:none"/>

for the blue gradient rectangles and by specifying,

     style="fill:url(#redGradientDefinition);stroke:none"/>

for the red gradient rectangles.

If you double-click on this file, you will see a rectangular grid of rectangles that are rendered with slanted linear gradients.

---