Menu
SVG Example Code to Skew Elements

style="display:block;width:100%;max-width:402px"
<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.


Learn more at amazon.com

More Graphics Design Tips:
• Create GIF Animations With Free GIMP Image Editing Program
• Pencil Free Open Source Cartoon Animation Drawing Program
• Basic Inkscape Vector Drawing
• SVG Code to Translate a Rectangle and Text
• Draw Bezier SVG Drawing Application
• How to Place Greek Letters in an Inkscape Drawing
• MathML mo Element Operators
• Introduction to X3D (Extensible 3D)
• How to Trace an Image Using Inkscape
• The Browser Safe Palette