Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

SVG Example Code to Skew Elements

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:
• How to Remove PNG and JPEG EXIF Metadata
• How to Make a Video Game for your Xbox for Free
• The Game Maker's Apprentice
• Where To Find Free Stock Photography, Clip Art, And Other Graphics For Your Web Site
• What is the Pantone Color System?
• Stop Motion Animation: Nine Creative and Easy Techniques
• Basic Inkscape Text
• How to Make Beautiful Skies with GIMP
• Find Free Stock Photos You'll Actually Want to Use For Your Website or Blog
• Basic Inkscape Vector Drawing

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2019 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268