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

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

Now I am trying to retrieve the coordinates of one of the rects dynamically, but using getBBox does not return the correct result. Can anyone tell me how to get the correct x, y, width and height properties of one of the rects?

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

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

Now I am trying to retrieve the coordinates of one of the rects dynamically, but using getBBox does not return the correct result. Can anyone tell me how to get the correct x, y, width and height properties of one of the rects?

• javascript
• html
• svg

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