Coordenadas rectangulares después de la transformación

Question

Actualmente estoy dibujando un rectángulo con una transformación en su elemento padre (g). El svg resultante es esto;

<svg version="1.1" width="1055" height="381"> 
    <g transform="rotate(120)"> 
     <rect x="0" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-0"></rect> 
     <rect x="100" y="0" width="100" height="100" rx="10" ry="0" stroke-width="0" style="stroke:rgb(0,0,0)" id="rect-1"></rect> 
    </g> 
</svg> 

Ahora estoy tratando de recuperar las coordenadas de uno de los rects forma dinámica, pero utilizando getBBox no devuelve el resultado correcto. ¿Alguien puede decirme cómo obtener las propiedades correctas de x, y, ancho y alto de una de las rectas?

Answer 1

Encontré la solución yo mismo;

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);