SVG Path анимация вращения

Question

Я пытаюсь заставить часть моего SVG вращаться, но кажется, что он вращается вокруг чрезвычайно большого источника, что сбивает с толку, потому что фактический путь невероятно мал.

Вот мой элемент pathанимация css:

.wing1 {
  transform-origin: bottom right;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}

Вот JSFiddle (с включенным SVG): http://jsfiddle.net/c5g3sq4e/

Я пытаюсь заставить элемент крыла вращаться вокруг правого нижнего угла так, чтобыпохоже, он летит, но я никогда не делал поворот SVG-элемента, поэтому я не уверен, что правильно указал источник.

Answer 1

Вам необходимо добавить transform-box: fill-box; Это сделает ограничивающий прямоугольник объекта для использования в качестве справочного поля.

.wing1 {
  transform-origin: bottom right;
  transform-box: fill-box;
  animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
  @keyframes spin {
    50% { transform: rotate(45deg); }
    100% { transform: rotate(0deg); }
  }
}