Using the SVG skew Function

---

Using the SVG matrix Function

Consider the rectangles rendered in Figure 6.7.

Figure 6.7: Drawing rectangles with the SVG matrix function.

The SVG document matrixRect1.svg in Listing 6.7 demonstrates how to use the SVG matrix function in order to perform linear transformations on a rectangle in the plane.

Listing 6.7 matrixRect1.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%"> <g transform="translate(100,100)">   <rect fill="none" stroke="red" stroke-width="4"         width="200" height="100"/>   <rect transform="matrix(.866 .5 -.5 .866 0 0)"         fill="none" stroke="blue" stroke-width="4"         width="200" height="100"/>   <rect transform="matrix(1 .5 .5 1 0 0)"         fill="none" stroke="green" stroke-width="4"         width="200" height="100"/> </g> </svg>

Remarks

The SVG code in Listing 6.7 renders three rectangles with width 200 and height 100, and whose perimeters are red, blue, and green, respectively. The first rectangle is rendered with the following SVG code:

<rect fill="none" stroke="red" stroke-width="4"       width="200" height="100"/>

The second rectangle is rendered with the following SVG code:

<rect transform="matrix(.866 .5 -.5 .866 0 0)"       fill="none" stroke="blue" stroke-width="4"       width="200" height="100"/>

The SVG matrix function specified in the SVG code for the second rectangle represents a clockwise rotation of 30% of the associated rectangle. The mathematics for rotations is beyond the scope of this book. For those of you who are interested in the details, this topic is covered in books on linear algebra.

The third rectangle is rendered with the following SVG code:

<rect transform="matrix(.866 .5 -.5 .866 0 0)"       fill="none" stroke="blue" stroke-width="4"       width="200" height="100"/>

The SVG matrix function specified in the SVG code for the third rectangle represents a combination of a skew and a rotation. Again, the mathematics can be found in a book on linear algebra.

---