SVG CSS3 动画的奇怪行为答案

【问题标题】：Strange behavior with SVG CSS3 animationSVG CSS3 动画的奇怪行为
【发布时间】：2013-02-14 03:32:46
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

虽然我可以很好地分别旋转较大的物体和较小的物体（没有摆动），但这很奇怪吗？我还使用另一个 SVG 编辑器创建了另一个 SVG（相同的设计）并且遇到了完全相同的问题。我现在已经转移到 B 计划，只使用图像。