Last Updated: February 25, 2016
·
379
· mattcodez

SVG Transforms

Was trying to scale and rotate an imported SVG file using SnapJS. Couldn't get it working, then did a little digging and found that the SVG element can't accept the transform attribute. Also, the file I'm importing is only <path> elements which also can't use the transform attribute. Solution, add all path elements to a new <g> element and then scale that.

https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform#Elements

var m = new Snap.Matrix();
m.scale(0.5);
m.rotate(-20, 0, 0);
el.select('g').transform(m);