Трансформация SVG, как повернуть вокруг центра?

Question

[Сергей Горячев]

У меня есть SVG элемент "оборванный" круг.
Хочу, чтобы при наведении на него, он крутился вокруг своего центра.
А он крутится вокруг точки 0, 1850 (генератор выдал так).
Генератор SVG из PNG не очень хороший(
https://jsfiddle.net/webirus/bcum7ja7/
Как заставить этот код крутиться вокруг центра?

Answer 1

[Ernest Faizullin]

Надо добавить 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/

Comments

[Сергей Горячев]

Странно, но у меня не работает, ни 50%, ни центер.

[Ernest Faizullin]

добавил префиксы

[Сергей Горячев]

Ernest Faizullin: посмотрел с хрома, крутится, а FF 45 не видит. это плохо.

[Сергей Горячев]

Ernest Faizullin, даже сейчас не заработала)))

Answer 2

[Vitaliy]

https://jsfiddle.net/bcum7ja7/2/
transform-origin для определения точки, относительно которой происходит трансформация, в данном случае
transform-origin:center; для #halfcircle1

Comments

[Сергей Горячев]

Странно, но у меня не работает, ни 50%, ни центер.

[Vitaliy]

Sergey: какой браузер?

[Сергей Горячев]

Виталий Столяров: FF 45

[Vitaliy]

Sergey: у FF, видимо, и с этим проблемы

Answer 3

[Nikolay Talanov]

Transform-origin в % для свг работает только в блинке/вебките. ФФ не дружит с %. В ИЕ вообще что ориджин, что сам трансформ надо через атррибуты задавать.
Хотите безболезненно работать с свг анимацией - юзайте GSAP. Там по умолчанию встроены все возможные костыли для всех браузеров.
Ну а если угараете по велосипедам, то трансформ-ориджин можно назначать с помощью JS, юзая getboundingclientrect (естественно там он дает лишь координаты положения фигуры внутри свг объекта и размеры, остальное за вами).