svg 内的路径未正确旋转答案

【问题标题】：Path inside svg is not rotating correctlysvg 内的路径未正确旋转
【发布时间】：2015-09-11 18:30:00
【问题描述】：

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

    #lens {
animation: roll 2s infinite;

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

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

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

【问题讨论】：

标签： svg rotation transform

【解决方案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);}
}

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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);}
}

【讨论】：