Как сделать Svg path rotate?

Question

[Алексей]

Есть svg, в нем несколько элементов path. Как сделать transform: rotate(45deg), что бы каждый path крутился вокруг себя? Сейчас он крутится вокруг svg, так как transform-origin: center center задан для svg который есть его контейнером

Comments

[Ankhena]

Задать transform-origin для path?

[Алексей]

Ankhena, Все равно path будет крутится вокруг svg

[Ankhena]

Алексей, явно вижу разницу: https://jsfiddle.net/069rechv/

[Ankhena]

Алексей, нашла такую штуку

Для CSS-трансформаций функция 2D-поворота довольно простая: только rotate(angle). Значение angle может быть представлено в градусах (deg), радианах (rad), оборотах (turn) или градах (grad). Также мы можем использовать значение calc() (например, что-нибудь типа calc(.25turn - 30deg)), но на данный момент это работает только в Chrome 38+/ Opera. Если вы используете положительное значение угла, тогда поворот будет идти по часовой стрелке (и наоборот, при отрицательном значении угла, поворот будет идти против часовой стрелки).

В случае с атрибутами для SVG-трансформации, функция поворота немного отличается — rotate(angle[ x y]). Значение angle работает аналогичным с функцией CSS-трансформации способом (положительное значение означает поворот по часовой стрелке, отрицательное значение — против часовой), но значение градусов должно быть безрамерным. Необязательные безразмерные параметры x и y указывают координаты фиксированной точки, вокруг которой мы поворачиваем элемент (и его систему координат). Если они опущены, тогда фиксированной точкой будет начальная точка системы координат. Если указать только параметры angle и x, значение будет невалидным и трансформация не применится.

Как и в функции translate(), параметры могут разделяться пробелами или запятыми.

Заметьте, что наличие параметров x и y не означает, что начальная точка системы координат переместится в эту точку. Система координат, как и сам элемент (и любые потомки, если они есть) просто будут вращаться вокруг точки x y.

Отсюда https://css-live.ru/articles/transformacii-dlya-sv...
Но это атрибутами.

С transform-box, ага, тоже хорошо.

[Алексей]

Ankhena, Да, спасибо большое, получилось с transform-box. Хорошего дня!)

Answer 1

[Алексей]

Нашел решение. Для Path применяем transform-box: fill-box;

Answer 2

[darchuk_sergey]

Каждому path задаёшь id и с айдишником работаешь

#box{
    transform-origin:50% 50%;
    transform-box: fill-box;
    animation: rotateBox 3s linear infinite;
  }
  
  @keyframes rotateBox {
    to {
      transform: rotate(45deg);
    }
}