<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:
• MathML Elements to Display Subscripts and Superscripts
• Coding Color for the Web
• Create GIF Animations With Free GIMP Image Editing Program
• Inkscpe Snap Controls Bar
• Inkscape Text Kerning
• Inkscape - How to Join Two Segments at Endnodes
• Inkscape Exercise: Draw Photorealistic Sphere
• What is the Pantone Color System?
• Five Surprising Reasons I Use Krita for Photo Editing
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site