本文主要是介绍svg流向动效-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="http://www.w3.org/2000/svg" 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的显示进行整体放缩
这篇关于svg流向动效-svg虚线流动-svg管道流动的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
