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.