パスに沿って回転する図形をアニメーション化する方法

Question

回転変換を使用すると、現在の要素の座標が変更されます。これはexampleを参照してください。

座標を制御する方法を知っている人や、回転した要素をパスに沿ってアニメーション化する方法について知っている人がいますか（一部のブラウザではjavascriptを使用してanimateMotionタグをサポートしていません）。

Answer 1

要素を原点の周りで回転させ、グループを使用して追加の変換を追加するのが最も簡単です。

たとえば、これは何か45度回転、50ピクセル下と左に移動し、その後、10秒以上（100、150）に（50、50）からそれをアニメーション化：

<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

あなたが望むものの詳細な説明がある場合は、私は助けてくれるかもしれません。