SVG複雑なグラデーションで塗りつぶされた円のX-Y軸回りの回転

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マークアップのみを使用して、これを宣言的に行うことができたらうれしく思います。Raphaelや他のファンキーなトリックのような外部ライブラリ（私はそれを理解することはできますが、避けようとしています）。

Answer 1

これはかなり近いです：http://jsfiddle.net/longsonr/8dA9j/原点を中心にしてパスを描いていないので、地球が原点の中心に来るようにパスを平行移動する必要があります。それを回転させて、すべてのものを原点で回転させたくない場合は、新しい平行移動ですべての回転をラップすることができます。

残りのウォブルを削除するには、transform = "translate（-360、-420）"の行を入力する必要があります。