css - SVG CSS3 动画的奇怪行为

Question

我应该先说我对 SVG 世界是全新的。我正在使用 SVG 和 CSS3 动画进行一个相当简单的实验。

我在 Inkscape 中创建了 SVG 并将其保存为纯 SVG。然后我把它放到 HTML 中来玩一些 CSS3 动画。

正如您在我下面的链接中看到的整个 SVG 奇怪地反弹，这可以通过从 CSS 中删除 .arm 类来删除。（它停止了具有 arm 类的单个红色圆圈组）。

问题是我希望红色圆圈组动画（旋转），而整个较大的组也在旋转。

我可能做错了什么想法或公然的事情？（我确实意识到它不是最好的 SVG，但我只是在试验）。

注意 1：如果我删除了 .arm 或 .center CSS 规则，在玩了一会儿之后，摆动就会停止，但它们一起会产生摆动。

score 0 · Accepted Answer

看起来形状在旋转时并未形成完美的圆形，因此在旋转时会移动中心导致摆动。

score 0 · Accepted Answer

我在这里为你修好了（有点）。

基本上我破解了它，所以它可以工作，但你需要将你的 SVG 包装在另一个容器中并让它从中心旋转。如果您在巢中设置动画太远，它将受到兄弟姐妹的影响。

2 回答 2