SVG CSS3动画的奇怪行为

Question

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

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

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

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

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

http://codepen.io/Fernker/pen/cwvfB

注1：如果我删除.arm或.center CSS规则后再玩一下，那么摆动就会停止，但它们会一起产生摆动。

Answer 1

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

Answer 2

我在这里为你解决了（有点）。

http://codepen.io/anon/pen/unmfE

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