Как правильно задать центр вращения для анимации SVG элемента?

#html #css #svg #css_animation #smil

Есть rect, которому нужно задать анимацию поворота "туда-обратно", неважно через
CSS-анимации или через SMIL, анимация всё равно простая. Но возникает трудность с определением
точки, от которой производится поворот фигуры. Нужно чтобы он производился от середины
нижней грани прямоугольника, но как определить эти координаты? Для наглядности я привёл
свой ошибочный пример, где circle отображает точку от которой нужно совершить поворот.   







    

Ответы

Ответ 1

Задайте transform-origin в пикселях, как и центр круга...



svg {
  height: 300px;
  width: 300px;
  background-color: grey;
}
rect {
  animation: anim 2s ease-in-out infinite;
  transform-origin: 165px 170px;
}
@keyframes anim {
  0%   {transform: rotate(-10deg)}
  50%  {transform: rotate(370deg)}
  100% {transform: rotate(-10deg)}
}



Ответ 2

Вариант SVG smil


  Но возникает трудность с определением точки, от которой производится
  поворот фигуры. Нужно чтобы он производился от середины нижней грани
  прямоугольника, но как определить эти координаты?



Определение координат центра вращения 


Для прямоугольника   

координата X - центра вращения: координата левого верхнего угла прямоугольника (x)
+ width/2  

x = 150+30/2 = 165px  

координата Y центра вращения:  

y = 120 + 50 = 170px


Вращение одного прямоугольника 




 svg {
      height: 300px;
      width: 300px;
      background-color: grey;