Как заставить SVG фигуру кружиться вокруг середины блока?

#css #css3 #svg #css_animation

Есть такой  пример:








Хочу заставить треугольник крутиться вершиной вокруг середины блока SVG.

Не прошу банального решения за меня, прошу объяснить, как работает система координат 

from="1 1 100 " 
to="100 100 100"


Если я правильно понял, это аналог @keyframes - CSS, и если я прав, то правильной
ли будет такая конструкция со средними значениями from="1 1 100 " 50%="50 50 50" to="100
100 100"

И вообще, в правильном ли я направлении в реализации данной задачи?
    

Ответы

Ответ 1

От нуля до 360 градусов вокруг точки (50, 50):






Ответ 2

CSS решение

В варианте решения SVG при трансформации вращения нужно точно выбрать центр вращения.
В примере выше, легко было найти центр вращения -50х50  для квадрата  100х100   

Но как быть, если нужно найти  центр сложной фигуры SVG?
 Это превращается в непростую задачу при ручном подборе или нужно использовать JS  bbox 

В CSS есть transform-box для решения этой задачи. Эта правило CSS избавляет от поиска
центра вращения:  


transform-box:border-box;


Использует центр родительского контейнера. В примере это центр прямоугольника - холст
SVG 100x100px 










transform-box:fill-box;    


Для вращения используется центр прямоугольника, ограничивающего треугольник.    










transform-box:view-box;     


Центр вращения находится в середине холста SVG