Last Updated: February 25, 2016
· 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.

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