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 xy, вместо того, чтобы брать полный радиус всего объекта в качестве оси вращения?

Надеемся, что это возможно сделать декларативно, используя только разметку SVG xml, а не какие-либо внешние библиотеки, такие как Raphael или другие причудливые трюкиЯ уверен, что могу понять это, но пытаюсь избежать этого).

Answer 1

Это довольно близко: http://jsfiddle.net/longsonr/8dA9j/ Поскольку вы не нарисовали пути с центром в начале координат, вам необходимо перевести пути так, чтобы глобус центрировался в начале координат.Затем вы можете повернуть это и обернуть все это в новый перевод, если вы не хотите, чтобы все это вращалось в начале координат.

Вы должны быть в состоянии возиться с transform = "translate (-360, -420) "линия для удаления оставшегося колебания.