最近项目需求，要使用svg写东西替代gif图片，于是，赶鸭子上架，现学现卖。
svg和canvas一样，对有些图形已经设置了相应的标签，直接使用标签即可绘图，例如rect:矩形，circle：圆形，这里我就不再多说了，可以查看w3school教程，或者打开https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/svg，直接查看API，这里说的直接是工作使用的两个图标之间用线段连接并做动画。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<svg width="410" height="600" xmlns="http://www.w3.org/2000/svg">
<path id="myPath" d="M0 0,400 400"
stroke="#0088ff" stroke-width="0.5" fill="none" transform="translate(0, 0)"/>
<text style="font-weight: bold;font-size: 20px; letter-spacing: -2px;text-shadow: 0 -1px 0px rgba(0,180,255,1)" fill="rgba(0,180,255,0.3)" transform="translate(0, 10)">
<textpath xlink:href="#myPath" >
<<
<animate attributeName="startOffset" from="100%" to ="0%" begin="0s" dur="2s" repeatCount="indefinite" keyTimes="0;1" calcMode="paced" keySplines="0.1 0.2 .22 1"/>
</textpath>
</text>
</svg>
</div>
</body>
</html>
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)起来，这个排列组合一直出不来，嘿嘿，所以偷懒用了两个小于符号，还好和箭头很像。嘿嘿~
网友评论