SVG动画，CSS自旋动画，但保持在同一位置

Question

我正在网站上为螺旋桨设置动画。
http://bug.soulmates.company（请参阅第3节）
但是即使我将样式设置为：

.propeller_spin {
   animation-name: spin;
   animation-duration: 4000ms;
   animation-iteration-count: infinite;
   transform-origin: center center;
 }

 @keyframes spin {
   from {
     transform:rotate(0deg);
     transform-origin: center center;
   }
   to {
     transform:rotate(360deg);
     transform-origin: center center;
   }
 }

螺旋桨在旋转时不会停留在其位置上。

Answer 1

DOM元素从自己的左上角测量转换原点，但是SVG相对于父SVG画布测量转换原点。

您可以在.propeller_spin类上使用transform-b​​ox：fill-box。

The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.