变换后的矩形坐标

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> 

现在我正在尝试动态检索 rects 之一的坐标，但使用 getBBox 不会返回正确的结果。谁能告诉我如何获得其中一个矩形的正确 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);