围绕 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 标记而不是任何外部库，如 Raphael 或其他花哨的技巧（我确信我能弄清楚，但尽量避免它）。

Answer 1

这非常接近：http://jsfiddle.net/longsonr/8dA9j/ 由于您尚未绘制以原点为中心的路径，因此您需要平移路径以使地球以原点为中心。然后，如果您不希望整个物体在原点旋转，您可以旋转它并将所有内容包装在一个新的翻译中。

您应该能够使用 transform="translate(-360,-420)" 行来消除剩余的摆动。