如何通过沿路径旋转来动画形状

Question

当我使用旋转变换时，当前元素的坐标将被改变。看到这个example。

是否有人知道如何控制坐标或给出一些关于沿路径制作旋转元素动画的建议（某些浏览器不支持使用JavaScript的animateMotion标记）。

Answer 1

我发现在原点周围旋转元素最简单，然后使用组添加其他变换。

例如，此旋转的东西45度，移动到50个像素向下和向左，然后10秒以上动画它从（50，50）到（100，150）：

<g> 
    <animateTransform attributeName="transform" 
        attributeType="XML" 
        type="translate" 
        from="50 50" to="100 150" 
        dur="10s" fill="freeze"/> 
    <g transform="translate(50,50) rotate(45)"> 
    Your elements here 
    </g> 
</g> 

可以构建用这种方式制作相当复杂的动画： http://www.petercollingridge.co.uk/blog/svg-seedling-animation

如果您对我想要的内容有更具体的描述，我可以提供帮助。