在 SVG 动画中围绕舞台原点以外的其他位置旋转路径

Rotate path in SVG animation around somewhere other than stage origin

本文关键字:其他 位置 路径 旋转 原点 动画 SVG 舞台      更新时间:2023-09-26

正在尝试制作时钟动画。

当前版本在这里: http://michaelneff.com/clock/

看起来手在舞台的 0,0 周围旋转,我不知道如何改变旋转手的点。

我在这里改编了Codrops教程:http://tympanus.net/codrops/2013/02/06/interactive-infographic-with-svg-and-css-animations/

我是SVG动画的新手,所以任何帮助将不胜感激。提前谢谢。

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

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

使用您使用的动画

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