[CSS] svg路径动画

让一个正方形沿着给定的路径移动。

如果运动路径不规则，那么设置top和left的属性值是非常困难的。

这时候可以用svg来实现。

path元素的形状由其d属性定义，

d属性的值是一个“命令+参数”的序列。

其中M 20 30 L 160 180包含两个命令序列。

M 20 30表示将画笔移动到坐标20和30，

L 160 180表示从画笔的当前位置到160和180位置画一条直线。

Path元素支持多种命令，你可以参考这里的，曲线命令。

html元素的CSS样式属性offset-path表示偏移路径。

通过将offset-path的值指定为path元素的d属性的值，我们可以实现元素沿着给定路径的移动。

其中offset-distance指定元素从初始位置偏移的百分比。

通过在@keyframes中逐帧改变偏移距离，可以实现动画效果。

我们将path的D属性修改为m10 80c40 10，6510，9580s150 150，180 80。

相应地修改多维数据集的偏移路径属性。

可以实现小方块沿着路径移动的效果。

MDN:路径

MDN:偏移路径

MDN:偏移距离

SVG动画操作指南

可缩放矢量图形(SVG) 2 -第9章:路径