svg流向动效

流向动效"/>

svg流向动效

用svg绘制，线路图，画出线路，然后根据线路的起始坐标，添加动态效果，出现流动效果。

  <style>.container{width: 1053px;height: 600px;}polyline {animation: dash 5000s linear infinite;}@keyframes dash {to {stroke-dashoffset: -200000;}}</style><div class="container">//viewBox="0,0,1053,600"<svg width="100%" height="100%" version="1.1" xmlns="" viewBox="0,0,1053,600">// 引入背景图，底图或管道图<!-- <image xlink:href="../assets/images/2.png" x="0" y="0" height="100%" width="100%"/>--><linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"><stop  stop-color="#ffe505"/></linearGradient><polylinestroke-dasharray = '10, 5'points="300 130,300 375,390 535,530 475,385,270"style="fill: transparent;stroke-dasharray: 30, 20;stroke: url(#linear);stroke-linecap: round;stroke-width: 10;"/></svg>
</div>

svg自适应 重点是viewBox=“0,0,1053,600”

viewBox用于划定可视区域的大小，要做自适应先设置viewBox的大小，一般按照svg的大小设置就可以了，设置好了viewBox才能对svg的显示进行整体放缩