CODEWITHSUNDEEP
csssvg
wicccked
wicccked

Reputation: 389

rotate and transform-origin in Chrome

According to the documentation, if I want to rotate an SVG element around its center, all I have to do is add 2 lines in the css file:

  transform: rotate(45deg);
  transform-origin: center;

In reality, however, the element gets rotated around the center of the SVG rather than the center of the element. Am I doing something wrong or is it the expected behavior? See the demonstration here: https://codepen.io/lkaratun/pen/YLzgdG

I'm using Chrome 65, addind -webkit- prefix didn't help.

Upvotes: 0

Views: 549

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

It's expected. You need to set transform-box: fill-box to get things to work the way you want.

You should also note that setting x, y, fill, height, cx, cy, r as CSS properties instead of as attributes is only currently supported in Chrome. Here's a cross browser solution.

rect {
  fill: red;
  transform: rotate(5deg);
  transform-box: fill-box;
  transform-origin: center;
}
circle {
  fill:black;
}
<svg width="500" height="500"">
<rect width="100px" height="50px" x="50px" y="50px"/>
<circle cx="100px" cy="75px" r="5px"/>
</svg>

Upvotes: 2

Related Questions