Monday, December 15, 2014

SVG Sequential Transforms Priority

When you want to do a series of sequential transforms on an SVG element, keep in mind that it is applied right to left.

In this example, this SVG code does the translate first, then the scaling, then the rotation.


<g transform="rotate(45) scale(2) translate(100, 100)">

It is counterintuitive but that is how it works.  Hopefully this solves some problems you might have on your SVG transforms.

0 comments:

Post a Comment

Programming and Computer Science

Powered by Blogger.