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)}
}

svg内部的路径无法正确旋转

2 个答案: