案例演示

1.在Ai中绘制一个多边形和一条曲线

2.导出svg代码

3.删除空白编组，给多边形添加一个编组后添加animateMotion动画

<animateMotion path="路径参数" begin="click" dur="3s" free="freeze"></animateMotion>

4.保存html文件后打开浏览器会发现多边形并没有按我们预期的效果进行移动，这是因为svg移动的中心点是Ai画板中矩形的左上角，因此为了让多边形按照我们预设的轨迹移动，可以将矩形的中心点放置在Ai画板左上角，然后给矩形做一个遮罩；或者同时将线条的上端与多边形中心点和Ai画板左上角重合，这样就能完美实现按轨迹移动。

5.如果按照第二种方法来做，接下来就按照需要利用 transform="translate" 来对移动中心点进行移动（移动中心可以在Ai中画一个矩形确当）

6.同时为了让多边形看起来不是十分生硬的移动，我们还可以用 rotate="auto" 给多边形设置自动角度变化，