如何旋转SVG路径元素，而不需要在圆圈中移动?

Question

我有一个有3个路径的SVG，但只需要它们连续旋转。这在具有一条路径的SVG上工作得很好，但不适用于这条路径，我还得到了其他一些我想在固定位置上旋转的路径。这里是源代码与预览!

.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;
}