Make SVG shapes transform like Dom elements

For a previous article on this blog I found myself rotating an SVG shape using CSS. At which point I immediately realised that the usual way of shifting the origin of rotation to the centre worked differently for SVG shapes than it did for standard dom elements.

For standard dom elements, you can do the below method, but, by default, it doesn’t work for SVG elements.

.my-class {
    transform-origin: 50% 50%;
    rotate: 45deg;
}

Solution

To support this in SVGs, you need to add one more property to tell it how to calculate the bounding box to which the transformations will relate.

.my-class {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    rotate: 45deg;
}

That’s it!

I found the above solution from this stack overflow thread as presented by user @George. There are also various other older approaches mentioned on that thread if this solution doesn’t work for you.

Thanks…

I also dissect and speculate on design and development.
Digging into subtle details and implications, and exploring broad perspectives and potential paradigm shifts.
Check out my conceptual articles on Substack or find my latest below.

You can also find me on Threads, Bluesky, Mastodon, or X for more diverse posts about ongoing projects.