如何沿路径旋转动画形状

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

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