변환 후 직사각형 좌표

Question

현재 부모 요소 (g)에 변형이있는 직사각형을 그립니다. 결과 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> 

는 이제 동적으로 의 구형 중 하나의 좌표를 검색하기 위해 노력하고 있지만, 올바른 결과를 반환하지 않습니다 getBBox을 사용하고 있습니다. 누구든지 rect 중 하나의 올바른 x, y, 너비 및 높이 속성을 가져 오는 방법을 말해 줄 수 있습니까?

Answer 1

해결책을 직접 찾았습니다.

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