Как прокрутить 360 до центра группы SVG?

Question

Я поставил демо на Codepen

У меня есть шестеренка, и я хочу, чтобы она вращалась относительно своих центров (как колесные транспортные средства), сидя за куском бумаги,но когда я написал свойства CSS как колесо, чтобы оно вращалось относительно центрального SVG, скажите мне, как исправить свойство transform-origin только для шестерни, чтобы оно было на месте и просто вращалось?

Answer 1

попробуйте это 1) Если вы хотите преобразовать origin относительно вашего элемента, вы должны сначала использовать transform-box: fill-box как

#wheel
{ 
  .....   
  transform-origin: 50% 50%;
  transform-box:fill-box;
}

2) это можно использовать, если вы хотите, чтобы оно было относительно родительского svg. В этом вы должны отрегулировать значение, чтобы найти точное положение

#wheel{
   ....
   ....
   transform-origin: 29% 49%;
}