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）”行来摆脱剩余的摆动。