javascript - 围绕舞台原点以外的某个地方旋转 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" />