Почему css transform не корректно работает в svg?

Question

[boberskyibohdan]

Трансформация работает, но обьект смещаеться, уже даже не знаю как сделать. Круг должен крутиться без остановки нон стоп
Видео

Comments

[Moskus]

Такие вопросы без кода имеют нулевые шансы на ответ.

Answer 1

[Максим Тимофеев]

не проще ли в песочнику код кинуть, чем видео делать? Потому как разбираться легче в песочнице.
Поэтому только предположение:
Вы не верно представляете точку вращения. Элементы вращаются не относительно своего центра, как нам бы всем хотелось. Прочитайте эту статью, думаю станет понятно: https://css-tricks.com/transforms-on-svg-elements/

Comments

[boberskyibohdan]

https://codepen.io/pszek/pen/eKzywq

Спасибо, читал статью, пробовал. Если раз прописать то всё работает, а вот если изменю на 1 градус кут, то вже надо другие координаты писать. Мне надо крутить на 360 градусов кружок. К каждому градусу координаты писать не вариант xD

[Максим Тимофеев]

boberskyibohdan, а что вращаться должно?

[boberskyibohdan]

Максим Тимофеев, желтый кружечок с крапочками

[Максим Тимофеев]

boberskyibohdan, и где его искать?

[boberskyibohdan]

Максим Тимофеев, https://codepen.io/pszek/pen/eKzywq
Вложение в #circle7 .svgCircleAnimation

[Максим Тимофеев]

boberskyibohdan,
Очевидно решение:

.svgCircleAnimation path {
  animation: rotateme 1s infinite;
}
@keyframes rotateme {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Но из-за центра вращения не получится. Пока выходят из ситуации перерисовкой, например:
https://jsfiddle.net/1pe2c837/3/
Как вариант еще:
https://codepen.io/elliottmunoz/pen/ACpvy?editors=1100
Но это не работает в ei и пока что не работает в edge (но они обещают)
https://caniuse.com/#search=SMIL

Answer 2

[Дмитрий Христоев]

https://www.youtube.com/watch?v=xxZzGOBkDP8