Rotate rectangle around its own center in SVG

You would have to set the center as the center of the filled element. Like this:

svg .rotate {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg);
}

You just need to add half the width/height of the rectangle to get its centre.

<g transform = "translate(100, 100) rotate(45 60 60)">

See transform documentation of the rotate function for more information.

The accepted answer works if you are drawing the rectangle starting at point (0,0) which was the OP case. However for me it was not!

Here is what worked for me:

To get the rectangle coordinates i used $('#rectID').getBBox() method, should return [rect-height , rect-width , rect-y , rect x ]
The center point is ( rect-x + (rect-width/2) , rect-y + (rect-height/2) )

Here is a snippet i used on the browser console:

var coord = $('#elemID')[0].getBBox();
coord.x + (coord.width/2) +' '+ coord.y + (coord.height/2)

origin
x = x + width / 2
y = y + height / 2
here
x is 10
y is 10
width is 120
height is 120

<g transform = "translate(100, 100) rotate(45 70 70)">

Related