Sams Teach Yourself SVG in 24 Hours

Transforming Using the skewX and skewY Properties

For those unfamiliar with the concept of skewing, here's a brief introduction. Skewing is, for all intents and purposes, simultaneously stretching and tilting an object only along an axis; oftentimes, if an object has been skewed, it appears to have been tilted at an angle.

Skewing comes in most handy when trying to create an isometric perspective. (Isometric perspective, often recognized in ancient Chinese paintings, bends one axis to create the appearance of depth.) To illustrate this concept, Figure 14.3 shows the lightning bolt you created in Hour 5 skewed 45° along the X axis.

Figure 14.3. Skewing an object tilts the artwork at a specified angle along an axis. In this example, the artwork ...