Zipper Effects and Scaled Cubic Bezier Curves

---

Using the SVG skew Function

Consider the rectangles rendered in Figure 6.6.

Figure 6.6: Drawing rectangles with the SVG skew function.

The SVG document in Listing 6.6 demonstrates how to use the SVG skew function in order to render a set of rectangles.

Listing 6.6 skewedRect1.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    x="0" y="0" width="150" height="50"    style="fill:yellow;stroke:blue"/> </g> <g transform="translate(300,100)"> <g transform="skewX(30)"> <rect    x="0" y="0" width="150" height="50"    style="fill:green;stroke:blue"/> </g> </g> <g transform="translate(500,100)"> <g transform="skewY(50)"> <rect    x="0" y="0" width="150" height="50"    style="fill:blue;stroke:blue"/> </g> </g> </svg>

Remarks

The SVG code in Listing 6.6 consists of three SVG g elements, each of which specifies an SVG transform function as well as an SVG rect element. The first SVG g element does not contain an SVG skew function, so it simply renders a standard rectangle.

The second SVG g element contains an SVG skew function skewX, which specifies a skewing with respect to the horizontal axis. The skew is accomplished by keeping the horizontal axis fixed while rotating the vertical axis counterclockwise by the specified number of degrees, which in this case is 30.

The third SVG g element specifies an SVG skew function skewY, which specifies a skewing with respect to the vertical axis. This skew is performed by keeping the vertical axis fixed and rotating the horizontal axis clockwise by the specified number of degrees, which in this case is 50.

Notice how the third rectangle appears 'longer' than the first rectangle, which shows you that the SVG skewY function actually performs two things: a rotation and a scale of a geometric object.

---