SVG transform, how to rotate around center?

Question

css

I have a broken circle SVG element.
I want it to rotate around its center when hovering over it.
And it spins around the point 0, 1850 (the generator gave out like this).
The PNG SVG generator is not very good (
https://jsfiddle.net/webirus/bcum7ja7/
How to make this code spin around the center?

Answer 1

We need to add transform-origin: 50% 50%;

.logo a:hover #halfcircle1 {
    -webkit-animation: animatelogo1 .5s ease infinite;
    animation: animatelogo1 .5s ease infinite;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

https://jsfiddle.net/bcum7ja7/3/

Answer 2

Transform-origin in % for svg only works in blink/webkit. FF is not friendly with %. In IE, in general, that the origin, that the transform itself must be set through the attributes.
If you want to work painlessly with svg animation - use GSAP. There, by default, all possible crutches for all browsers are built in.
Well, if you are crazy about bicycles, then the transform origin can be assigned using JS, using getboundingclientrect (of course, there it gives only the coordinates of the position of the figure inside the svg object and the dimensions, the rest is up to you).