Using the SVG rotate Function with Checkerboards

---

Using the SVG scale Function with Checkerboards

Consider the scaled checkerboard pattern rendered in Figure 6.3.

Figure 6.3: A scaled checkerboard with the SVG scale function.

The SVG document scaledCheckerBoard1.svg in Listing 6.3 demonstrates how to use the SVG scale function in order to scale a checkerboard pattern.

Listing 6.3 scaledCheckerBoard1.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="800" height="500">   <defs>   <pattern             width="80" height="80"            patternUnits="userSpaceOnUse">      <rect fill="red"            x="0"  y="0"  width="40" height="40"/>      <rect fill="blue"            x="40" y="0"  width="40" height="40"/>      <rect fill="blue"            x="0"  y="40" width="40" height="40"/>      <rect fill="red"            x="40" y="40" width="40" height="40"/>   </pattern>   </defs> <g transform="translate(50,50)">    <g transform="scale(.5)">      <rect         fill="url(#checkerPattern)"         style="stroke:white"         x="0" y="0" width="320" height="320"/>    </g> </g> </svg>

Remarks

The SVG defs element in Listing 6.3 contains an SVG pattern element that has an id attribute with the value checkerPattern. This pattern consists of an outer square whose length is 80. The inside of the pattern consists of a 2x2 grid of squares whose colors form a checkerboard pattern.

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

fill="url(#checkerPattern)"

The scaling performed on the checkerboard pattern is specified in the following SVG fragment:

<g transform="translate(50,50)">    <g transform="scale(.5)">      <rect         fill="url(#checkerPattern)"         style="stroke:white"         x="0" y="0" width="320" height="320"/>    </g> </g>

Notice the pair of nested SVG g elements: the outer SVG g element performs a translation of the origin from the point (0,0) to the point (50,50). The inner SVG g element performs a clockwise (not counterclockwise) rotation of 30° of the following rectangle:

<rect    fill="url(#checkerPattern)"    style="stroke:white"    x="0" y="0" width="320" height="320"/>

The rectangle has a fill value that references an SVG pattern element defined in the SVG defs element in Listing 6.3.

Incidentally, you can specify two numbers in the SVG scale function: the first number is used for scaling in the horizontal direction and the second number is used for scaling in the vertical direction. For example, the following snippet scales by a factor of 2 in the horizontal direction and by a factor of .5 in the vertical direction:

<g transform="scale(2,.5)">

If you specify only the first number, then the second number defaults to the value of the first number. For example, the following snippet,

<g transform="scale(3)">

is equivalent to:

<g transform="scale(3,3)">

---