Я хочу вращать ветротурбину, но она не вращается от центра полюса турбины

Question

Я пытаюсь вращать турбину в 360 degree, но она не вращается от своего центра. Вся турбина вращается на 360 градусов. Я хочу, чтобы он вращался с начальной позиции. Js ссылка на бин

#main-blade {
  animation: spin 5s linear infinite;
  /*  transform-origin: center; */
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.77 110.21"><defs><style>.cls-1{fill:#46b800;}</style></defs>
<g id="turbine" data-name="Layer 2">
  <g id="blade" data-name="Layer 2">
    <g id="main-blade">
      <polygon class="cls-1" points="48.6 39.8 55.43 36.21 86.51 41.19 87.77 46.15 48.34 43.14 48.6 39.8"/>
      <polygon class="cls-1" points="32.19 46.4 29.9 53.77 4.39 72.22 0 69.62 30.01 43.86 32.19 46.4"/>
      <polygon class="cls-1" points="32.22 34.33 25.11 31.32 9.27 4.12 12.3 0 34.96 32.41 32.22 34.33"/>
      <path class="cls-1" d="M45.53,41.62a6.24,6.24,0,1,1-6.24-6.24A6.23,6.23,0,0,1,45.53,41.62Z"/>
      <path class="cls-1" d="M45.08,39.31c0,.1,0,.2,0,.3A6.81,6.81,0,0,1,34,44.89a6.23,6.23,0,0,0,11.54-3.27A6.1,6.1,0,0,0,45.08,39.31Z"/>
    </g>
      <polygon class="cls-1" points="44.01 49.98 46.44 110.21 33.97 110.21 37.01 50.59 44.01 49.98"/>
  </g>
</g>
</svg>

Answer 1

Подход с использованием transofrm-origin правильный. Но когда вы нарисуете ограничивающий прямоугольник вокруг #main-blades, вы увидите, что центр ограничивающего прямоугольника не равен центру турбины. Это означает, что вы должны определить правильное начало преобразования, вычислив правильные значения %, или вы просто делаете это путем попытки и ошибки и принимаете его, когда вы немного не в себе:)

#main-blade {
  animation: spin 5s linear infinite;
  
  transform-origin: 44.8% 37.8%;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.77 110.21"><defs><style>.cls-1{fill:#46b800;}</style></defs>
<g id="turbine" data-name="Layer 2">
  <g id="blade" data-name="Layer 2">
    <g id="main-blade">
      <polygon class="cls-1" points="48.6 39.8 55.43 36.21 86.51 41.19 87.77 46.15 48.34 43.14 48.6 39.8"/>
      <polygon class="cls-1" points="32.19 46.4 29.9 53.77 4.39 72.22 0 69.62 30.01 43.86 32.19 46.4"/>
      <polygon class="cls-1" points="32.22 34.33 25.11 31.32 9.27 4.12 12.3 0 34.96 32.41 32.22 34.33"/>
      <path class="cls-1" d="M45.53,41.62a6.24,6.24,0,1,1-6.24-6.24A6.23,6.23,0,0,1,45.53,41.62Z"/>
      <path class="cls-1" d="M45.08,39.31c0,.1,0,.2,0,.3A6.81,6.81,0,0,1,34,44.89a6.23,6.23,0,0,0,11.54-3.27A6.1,6.1,0,0,0,45.08,39.31Z"/>
    </g>
      <polygon class="cls-1" points="44.01 49.98 46.44 110.21 33.97 110.21 37.01 50.59 44.01 49.98"/>
  </g>
</g>
</svg>

Я нашел эти значения (44.8% 37.8%), сохранив версию изображения со статусом c и повернув ее на 180 градусов. Это моделирует момент, когда расстояние между началом координат и повернутым изображением является наибольшим.

Таким образом, css будет выглядеть так:

#main-blade{
  transform-origin: 44.8% 37.8%;
  transform: rotate(180deg);
}

Редактировать : Рассчитать реальное x-начало блейдов

Давайте в качестве примера рассмотрим смещение по x начала координат основных блейдов в схеме ниже. Схема представляет начальную позицию основных блейдов в вашем SVG. Найти данные расстояния с помощью инструмента по вашему выбору. Единица измерения не важна, но должна быть одинаковой для всех измерений.

Красная точка представляет центр изображения. зеленая точка источник ваших основных лезвий.

Вы можете видеть, что центр изображения находится на 4.4cm. Тогда просто узнать смещение в процентах. Итак, 4.4cm / 8.7cm = 1/2 => 50% ¹ . Теперь давайте выясним смещение по оси X истинного происхождения лопастей: 3.8 cm / 8.7cm = 0,4367 = 43,57% `.

---

¹ : должно быть 4,35 вместо 4,4. Извините за неточность ... OpenOffice Draw не показывает значения меньше 1 мм ....