Make A Svg Transform Matrix Rotate Around Its Center

HTML JS var layer = { sizeReal : { 'width': 20, 'height': 100 } , sizeS

Solution 1:

Fixed!! the sequence of the matrix elements was wrong :)

$("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' );
},50);

http://jsfiddle.net/6DR3D/2/

Solution 2:

The problem is the rotate(angle, x, y) call. This call rotates at the given angle around the point (x,y). But instead you build your matrix to rotate around layer.position.

In order to rotate around a given point (x,y), relative to the object, you need to first translate to (-x,-y), then rotate and then translate back to (x,y).

So if you had a matrix multiplication function Mul it might look something like this:

var m1 = GetMatrix(0, 0, {"x":-layer.sizeScaled.width/2, "y":-layer.sizeScaled.height/2});
var m2 = GetMatrix(layer.rotation, layer.scale, layer.position);
var m3 = GetMatrix(0, 0, {"x":layer.sizeScaled.width/2, "y":layer.sizeScaled.height/2});

var m = Mul(Mul(m3,m2), m1); //i.e. apply the matricdes in order m1, then m2, then m3