如何旋转 SVG 路径元素而不使其绕圈移动？

问题描述

我有一个带有 3 个路径的 SVG，但只需要它们连续旋转。这在具有一条路径的 SVG 上运行良好，但不适用于这条路径，我还有一些我想在固定位置旋转的其他路径。 Here is the source code with preview!

  .rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

解决方法

可以变换旋转原点，默认原点是左上角。 要围绕其中心旋转项目，您必须变换原点。

.rotate {
    transform-origin: 50% 50%;
    animation: rotation 8s infinite linear;
}