Трансформация поворота в SVG?

#css3 #svg #анимация #css_animation #transform

Столкнулся с непониманием, как сделать поворот определенной части сгруппированной
svg части объекта. Приведу пример 



.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}

.za_rightArm__one {}

.za_rightArm__two {
  transition: .2s linear;
  transform-origin: 100% 40px;
  transform: rotate(0deg);
}

.game_block:hover .za_rightArm__two {
  transition: .2s linear;
  transform: rotate(35deg);
}


  





Идея следующая. По наведению на область в которой находиться кнопка, SVG картинка
выбрасывает руку вверх, при выходе из области hover опускает с предварительной задержкой.
Пытаюсь понять, как в SVG задается transform-origin, но что-то пока не дошло. Пробовал
 читать но ясности не принесло. Как определить  

 вот эти вот точки объектов, а потом организовать правильный поворот. (Желательно
что б оно ещё и FF работало, а то постоянно мне там баги лезут)
    

Ответы

Ответ 1

Понял, свою ошибку. Можно сделать и без привлечения сторонних библиотек. Просто надо
правильно задавать контрольные точки и делать смещение 



.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}



.za_rightArm__one {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: translateX(0) translateY(0);
}

.game_block:hover .za_rightArm__one {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: translateX(-11px) translateY(-20px);
}

.za_rightArm__two {
  transform-origin: 50px 100px;
  transition: .2s all;
  transform: rotate(0deg) translateX(0) translateY(0);
}


.game_block:hover .za_rightArm__two {
  transform-origin: 50px 100px;
 transition: .2s all;
  transform: rotate(46deg) translateX(14px) translateY(-10px);
}


  



Ответ 2

Вариант очень сырой, выкладываю по предложению автора вопроса.
Пример будет доработан.  

Анимация начинается после клика по кнопке



.container {
width:75%;
height:75%;
}
.game_block {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.btn_gamePlay {
  width: 100vh;
  height: 100vh;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  transition: 0.2s all;
}

.st7 {
  fill: #70203c;
}

.st8 {
  fill: #ef447e;
  stroke: #5e112d;
  stroke-width: 0.5;
  stroke-miterlimit: 10;
}