公司的项目，原来打算用canvas实现，后来发现svg有专门的元素实现path动画，这里简要记录下开发过程，以及介绍一下svg的一些知识。
实现路径动画，运用的只是点是SVG SMIL animation动画，详细的介绍点击这里。当然也需要对svg相关知识有所了解
我所实现的效果是：一辆小车可以沿着公路行驶到指定位置。点击目标位置，小车就从当前位置沿公路行驶到目标位置，一共有多个位置点。
开发之前，需要先了解SVG animation涉及到的元素，路径动画我用到的是<animateMotion>，这个元素的path属性就是运动的路径（使用规则请查看这篇文章中的path介绍，或者MDN中path的介绍）。
简单说path就是坐标，多个坐标确定出路径。需求的本质就是让小车在两个坐标点之间运动。最简单的情况就是只有两个点，那就是一条直线。而我所做的需求，路径实际上是一条折线，你可以想象“凹”这个字。那么这就涉及到多个坐标点。
那么思路就来了，我把每个拐角处的坐标定义成一个数组，比如:
[{x:0, y: 0}, {x: 0, y: 100}, {x: 20, y: 100}, {x: 20, y: 50}, {x: 40, y:50}]然后再把小车需要停下的位置坐标按照路径顺序插入到这个数组中，当点击目标位置时，就把这个数组中起始位置和目标位置之间的坐标数据截取，并生成path属性的值，这样就把小车的路径规划好了。
路径规划好后，<animateMotion>元素会实现小车的运动，当然是有一些属性来设置运动效果的。
我实现的路径动画的核心思路就是这样的，唯一麻烦的就是确定各个转折点的坐标和目标位置的坐标，坐标确定好后剩下知识点就是使用<animateMotion>元素的API和属性，使用JS操作数据和DOM的一些常规知识。
一些优化的点：
- 小车在转折点的动画如果想要平滑一点的话（理解就是把点变成圆角）， 需要用到贝塞尔曲线。path属性可以实现各种贝塞尔曲线。
- svg展示出来的就是一张图片，有可能会在不同尺寸的屏幕上显示，如何等比缩放。这就要用到svg的viewbox属性，详细内容点击这里