關於X-Y軸的複雜漸變填充圓的SVG旋轉

Question

我在理解SVG旋轉時遇到了一些困難。我已經創建了下面的例子來說明我想做的事：

• 簡單（聲明）SVG旋轉動畫：http://jsfiddle.net/bcmoney/FrEeA/
• 地球自轉破嘗試：http://jsfiddle.net/bcmoney/EbRb9/ （使用的jsfiddle酷副作用是，當你拖動窗口大小時，你實際上可以看到矢量圖形的比例，但我離題）

我只是想旋轉它就像這個足球（這是證明它不太難以旋轉更復雜的物體比簡單的一圈）： http://xahlee.org/js/soccer_ball_rotating.svg

任何人都可以建議在哪裏進行更改，以使「地球」矢量圖形繞0,0 x-y軸旋轉，而不是將整個對象的全部半徑作爲其旋轉軸？

希望它可以做到這一點聲明，只使用SVG XML標記，而不是任何外部庫，如拉斐爾或其他花哨的技巧（我敢肯定，我可以弄清楚，但試圖避免它）。

Answer 1

這非常接近：http://jsfiddle.net/longsonr/8dA9j/由於您尚未繪製以原點爲中心的路徑，因此需要翻譯路徑以便地球以原點爲中心。如果你不想讓整個東西在原點處旋轉，那麼你可以旋轉它幷包裹所有新的翻譯。

您應該可以使用transform =「translate（-360，-420）」這一行來移除剩餘的擺動。