SVG 路径旋转动画

Question

我试图让 SVG 的一部分旋转，但它似乎围绕一个非常大的原点旋转，这很令人困惑，因为实际路径非常小。

这是我的路径元素动画 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); }
  }
}