Rectangle Coordinates After Transform

I am currently drawing a rectangle with a transformation on his parent element (g). The resulting svg is this;

Solution 1:

I found the solution myself;

var matrix = shape.getCTM();

// transform a point using the transformed matrix
var position = svg.createSVGPoint();
position.x = $(shape).attr("x");
position.y = $(shape).attr("y");
position = position.matrixTransform(matrix);

Share