svg повернуть путь вокруг точки

У меня есть svg с парой путей: https://jsfiddle.net/homa/sbvsjxqe/

Я хочу повернуть пути вокруг центра. Когда я добавляю следующий код, путь выходит за пределы поля зрения и вращается по очень большому кругу:

<animateTransform attributeName="transform"
                  attributeType="XML" 
                  type="rotate"
                  from="0 50 50"
                  to="360 50 50" 
                  dur="7s"
                  repeatCount="indefinite" />

Как я могу заставить путь вращаться вокруг центра?


svg svg-animate
person Homa    schedule 08.02.2017    source источник
comment
измените числа 50 50 в from и to так, чтобы вместо этого они отражали центр пути   -  person Robert Longson    schedule 08.02.2017

Ответы (1)


arrow_upward
1
arrow_downward

Второе и третье числа в атрибутах from и to — это координаты центра вращения.

Установите их в точку, вокруг которой вы хотите вращаться. Скорее всего нет (50,50).

person Paul LeBeau    schedule 08.02.2017