Generating a 3D Checkerboard Grid

   



Generating a Gradient Checkerboard

Consider the gradient checkerboard pattern rendered in Figure 4.4.

click to expand
Figure 4.4: A gradient checkerboard pattern.

The SVG document in Listing 4.5 demonstrates how to define and reference an SVG pattern element in order to generate a gradient checkerboard pattern.

Listing 4.5 checkerBoardGradient1.svg

start example
<?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="800" height="400">   <defs>   <linearGradient       x1="0" y1="0" x2="40" y2="40"      gradientUnits="userSpaceOnUse">      <stop offset="0%"   style="stop-color:#FF0000"/>      <stop offset="100%" style="stop-color:#000000"/>   </linearGradient>   <pattern             width="40" height="40"            patternUnits="userSpaceOnUse">      <rect fill="url(#gradientDefinition)"            stroke="yellow" stroke-dasharray="4 4 4 4"            x="0" y="0" width="40" height="40"/>   </pattern>   </defs>   <rect      fill="url(#checkerPattern)"      style="stroke:red"      x="0" y="0" width="800" height="400"/> </svg>
end example

Remarks

The SVG defs element in Listing 4.5 contains an SVG pattern element that has an id attribute with the value checkerPattern. This pattern consists of one square whose length is 40 with a fill color that refers to a linear gradient whose id value is gradientDefinition.

The diagonal gradient effect is achieved by means of the following line:

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

The preceding line specifies a (relative) start point of (0,0) and an end point of (40,40), which renders a linear gradient by means of a set of contiguous diagonal line segments. This is a subtle yet important point when you're trying to achieve color effects whose nuances are not obvious.

The SVG g element defines a rectangle with a width of 800 and a height of 400. This rectangle has a fill attribute that refers to the pattern checkerPattern defined in the SVG defs element by using the following syntax:

 fill="url(#checkerPattern)"

If you double-click on this file, you will see a rectangular grid of rectangles, each of which is rendered with a linear gradient that varies from red to black.



   



Fundamentals of SVG Programming. Concepts to Source Code
Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)
ISBN: 1584502983
EAN: 2147483647
Year: 2003
Pages: 362

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net