<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:
• Animation Software - The Amazing 3D World
• Basic Inkscape Vector Drawing
• Free Replacement for Overpriced Photoshop
• SVG Code for Outlined Letters Text
• Inkscape - How to Join Two Segments at Endnodes
• Inkscape: Combine the Paths of Multiple Shapes
• How to Make a Video Game for your Xbox for Free
• How to Remove PNG and JPEG EXIF Metadata
• Graphics Design for Beginners - Blur Filters
• Introduction to Draw SVG Free Online SVG Drawing Application