Using the SVG translate Function

   



Using the SVG rotate Function with Checkerboards

Consider the checkerboard pattern rendered in Figure 6.2.

click to expand
Figure 6.2: Rotated checkerboard with the SVG rotate function.

The SVG document in Listing 6.2 demonstrates how to use the SVG rotate function in order to rotate a checkerboard pattern.

Listing 6.2 rotatedCheckerBoard1.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="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(300,50)">   <g transform="rotate(30)">     <rect        fill="url(#checkerPattern)"        style="stroke:white"        x="0" y="0" width="320" height="320"/>   </g> </g> </svg>
end example

Remarks

The SVG defs element in Listing 6.2 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 width 400 and height 400. This rectangle refers to the pattern checkerPattern defined in the SVG defs element by using the following syntax:

fill="url(#checkerPattern)"

The rotation of the checkerboard pattern is specified in the following SVG fragment:

<g transform="translate(300,50)">  <g transform="rotate(30)">    <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 (300,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.2. As you can see, a lot is happening in a very small amount of code!



   



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