與SVG CSS3動畫的奇怪行爲

Question

我應該說這是因爲我是全新的SVG世界。我正在玩一個使用SVG和CSS3動畫的相當簡單的實驗。

我在Inkscape中創建了SVG並將其保存爲普通的SVG。然後，我把它放到HTML中來玩一些CSS3動畫。

正如你可以看到我的整個SVG以下鏈接反彈奇怪的是，這可以通過從CSS取出.ARM類中刪除。 （這會停止具有臂級的單個紅色圓圈組）。

的問題是，我想紅圈組動畫（旋轉），而整個大組也旋轉。

任何想法或公然的事情，我可能做錯了？ （我意識到這不是最好的SVG，但我只是在試驗）。

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

注1：四周多一點打之後，如果我刪除或者.ARM或.center CSS規則，然後擺動停止，但它們共同產生擺動。

Answer 1

在這裏，我爲你解決它（種）。

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

基本上我砍死它，所以它的工作原理，但你需要來包裝你SVG在另一個容器中，並有從中心旋轉。如果你在巢上動畫太深，它會受到兄弟姐妹的影響。

Answer 2

看起來好像旋轉時的形狀也沒有創造一個完美的圓，因此移位中心而旋轉導致擺動。