Snap Matrix

var s = Snap("#svgout");

var r = s.rect(100,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red' });
var c = s.circle(50,50,50).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'blue' });
var t = s.text(150,75,'The order of transformations is important!!!');
var g = s.group(r,c,t);

var myMatrix = new Snap.Matrix();
myMatrix.scale(4,2);            // play with scaling before and after the rotate 
myMatrix.translate(100,0);      // this translate will not be applied to the rotation
myMatrix.rotate(45);            // rotate
//myMatrix.scale(4,2);
//myMatrix.translate(100,0);    // this translate will take into account the rotated coord space
//g.animate({ transform: myMatrix.toTransformString() },1000);  // probably not needed

var myInvertedMatrix = myMatrix.invert();

g.animate({ transform: myMatrix },3000, mina.bounce, function() { g.animate({ transform: myInvertedMatrix }, 3000, mina.bounce) } );
console.log( g.transform(), g.matrix, myMatrix.split() );


   


        Edit/Run