svg内的路径旋转不正确

我想让svg路径在另一条路径内旋转，产生一个简单的效果。代码非常简单，如下所示：

    #lens {
animation: roll 2s infinite;

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

其想法是使眼睛绕轴旋转，但它并没有这样做，而是围绕整个svg旋转。这很难解释，但只要看一看这个JSFIDLE模板，您就会理解这个问题：

---

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

您需要添加

变换原点：50%50%到#镜头，所以看起来像这样：

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

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

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