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>
    <polyline
      stroke-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的显示进行整体放缩