svg 内的路径未正确旋转

Question

我想用一个在另一个路径内旋转的 svg 路径制作一个简单的效果。代码很简单：

    #lens {
animation: roll 2s infinite;

    }
    @keyframes roll {
        0% {transform: rotate(0deg);}
        100% {transform: rotate(360deg);}
    }

这个想法是让眼睛绕着轴旋转，但它一直绕着整个 svg 旋转。很难解释，但是一旦你看一下这个 jsfiddle 模板，你就会明白这个问题：https://jsfiddle.net/faster223/6d45ck42/

旋转时眼睛应该固定在一个地方。

Answer 1

您需要将 transform-origin: 50% 50%; 添加到 #lens，使其看起来像这样：

#lens {
    animation: roll 2s infinite;
    transform-origin: 50% 50%;
}
@keyframes roll {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

Answer 2

让我为面临 SVG 路径旋转问题的人添加此内容。您需要具有以下样式。

#lens {
  animation: roll 2s infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes roll {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg)}
}

Answer 3

我也遇到了同样的问题，唯一缺少的部分是 transform-box: fill-box;感谢@Aqib Mapari 回答下面的代码对我有用

 #lens {
    animation: roll 2s infinite;
    transform-origin: 50% 50%;
    transform-box: fill-box;

}
@keyframes roll {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

svg 内的路径未正确旋转

Path inside svg is not rotating correctly

svg

transform

rotation