SVG

最近项目需求，要使用svg写东西替代gif图片，于是，赶鸭子上架，现学现卖。
svg和canvas一样，对有些图形已经设置了相应的标签，直接使用标签即可绘图，例如rect:矩形，circle：圆形，这里我就不再多说了，可以查看w3school教程，或者打开https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg，直接查看API，这里说的直接是工作使用的两个图标之间用线段连接并做动画。

image.png

效果：小箭头循环从底部沿着直线运动到最上面。
其中遇到的问题：
（1）项目中svg比较复杂，并且设置了overflow:hidden，开始没找出来，箭头一直不显示，但是一直在动，这时修改父级的宽和高，保证在svg的宽高以上或者相等；
（2）path的路径，要在svg的高以下的值，不然箭头到达边缘只显示一半；
（3）如果项目两个元素之间位置比较复杂，不需要给svg旋转位移，那样text里面的内容会变化，因为这是对画布进行了操作，可以在svg外面的div进行旋转位移操作；
（4）text是svg里操作文本的标签，textpath是沿着path路径设置，animate使沿着path路径的文本运动起来。

箭头可以使用marker，但是箭头沿着路径(textpath)运动(animate)起来，这个排列组合一直出不来，嘿嘿，所以偷懒用了两个小于符号，还好和箭头很像。嘿嘿~