在舞台原点以外的某处旋转SVG动画中的路径

Question

尝试制作时钟动画。

当前版本位于：http://michaelneff.com/clock/

看起来手在舞台的0,0左右旋转，我无法弄清楚如何改变旋转手的点。

我在Codrops教程中对此进行了调整：http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/

我是SVG动画的新手，所以任何帮助都会非常感激。提前谢谢。

Answer 1

您可以使用rotate（）变换的三个参数版本指定旋转中心。

transform="rotate(<angle> <cy> cy>)"

使用动画

<animateTransform attributeName="transform" 
                      attributeType="XML"
                      type="rotate" 
                      from="0 60 70" 
                      to="360 60 70" />