SVG Example Code to Skew Elements

By Stephen Bucaro

SVG Example Code to Skew Elements

<svg width="240" height="280" version="1.1" xmlns="http://www.w3.org/2000/svg" style="border-style:solid;">
   <rect x="10" y="10" width="80" height="80" stroke="#000" fill="red" transform="skewX(45)" />
   <rect x="10" y="100" width="80" height="80" stroke="#000" fill="green" transform="skewY(45)" />
</svg>

To skew means to slant at an angle. With SVG you can skew the x-axis or the y-axis. To skew the x-axis, use the skewX(a) transform. To skew the y-axis, use the skewY(a) transform. In either case you would provide as a parameter the angle in degrees to skew. The syntax of the skew transform is shown below.

transform="skewX(a)"

transform="skewY(a)"

In experimenting with the skew tramsforms, I find that an element skewed along one axis greatly effects the location of an element skewed along another axis on the same canvas. I don't know the reason for this, but upon inspection of code generated by inkscape for placing oppositely skewed elements on the same page, it uses the matrix transform instead.

More Graphics Design Tips:
• Create GIF Animations With Free GIMP Image Editing Program
• Free Replacement for Overpriced Photoshop
• How to Remove PNG and JPEG EXIF Metadata
• SVG Example Code to Rotate Elements
• How to Create a Product Box in Photoshop
• Tips and Tricks for Getting Free Images
• SVG Code to Place Text on a Curved Path
• How to Place Greek Letters in an Inkscape Drawing
• Stop Motion Animation: Nine Creative and Easy Techniques
• How to Make a Simple Animated Banner in Flash CS3

RSS Feed

 Follow @Stephen Bucaro

 General Web Design
 HTML Quick Reference
 CSS Quick Reference
 Java Script Quick Reference
 HTML Design
 Graphics Design
 Easy Cascading Style Sheets
 Easy Java Script Code
 Web Design Tools
 Coding Issues