Snap transforms

Time to get used to transforms...transforms are combined and affect a 'matrix. If you look at the markup at the bottom when run, you will see some transform 'matrix'. These are the combined transforms in one lump.



var s = Snap("#svgout"); 

var c = s.circle( 200,200,10 );
var r = s.rect(200,100,100,100,20,20).attr({ stroke: '#123456', 'strokeWidth': 20, fill: 'red', 'opacity': 0.3 });

rclone = r.clone();
rclone2 = r.clone();
rclone3 = r.clone();
rclone4 = r.clone();
rclone5 = r.clone();

//t=relative transform, T=absolute transform, s=relative scale, S=absolute Scale
//r=relative rotate, R=relative rotate
//relative means it takes into account previous transforms to accumulate
//here it doesn't make much difference, until we combine later


rclone.transform( 't100,100');
rclone2.transform( 'r20,200,200' );
rclone3.transform( 'r40,200,200' );

s.text(350,150,"rotate around 200,200");

rclone4.transform( 't100,100r20,200,200' );
rclone5.transform( 't100,100r40,200,200' );

s.text(450,250,"combined translate of 100,100 and rotate around 200,200");