如何在不绕圈移动的情况下旋转 SVG 路径元素？

Question

我有一个带有 3 条路径的 SVG，但只需要 em 持续旋转。这在具有一条路径但不适用于这条路径的 SVG 上效果很好，而且我还有其他一些我可以在固定位置上旋转的路径。 Here is the source code with preview!

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

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

Answer 1

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

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