tọa độ hình chữ nhật sau khi chuyển đổi

Question

Tôi hiện đang vẽ một hình chữ nhật có phép biến đổi trên phần tử cha của mình (g). Kết quả là svg;

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

Bây giờ tôi đang cố gắng để lấy tọa độ của một trong những rects động, nhưng sử dụng getBBox không trả lại kết quả chính xác. Bất cứ ai có thể cho tôi biết làm thế nào để có được đúng x, y, chiều rộng và chiều cao tài sản của một trong những rects?

Answer 1

Tôi đã tự tìm ra giải pháp;

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