如何画svg路径图

在画路径图之前，首先得在package.json引入2个依赖

废话不多说，直接上代码

 <style>
   .green {
     position: absolute;
   }

   .blue {
     position: absolute;
   }

   .yellow {
     position: absolute;
   }

   .red {
     position: absolute;
   }
   .orange {
     position: absolute;
   }
   .path {
     width: 300px;
     height: 150px;
     stroke: pink;
     stroke-width: 10;
     stroke-dasharray: 15, 5;
     fill: transparent;
     display: block;
     position: absolute;
   }

   .article {
     display: flex;
     flex-direction: column;
     position: relative;
     width: 100%;
     min-height: 8rem;
     margin-bottom: 1rem;
     padding: 1rem;
   }
 </style>
 <template>
   <div>
     <section style="display: flex;
     flex-direction: column;
     position: relative;
     width: 100%;
     max-width: 30rem;
     margin: auto;
     text-align: center;">
       <article class="article">
         <svg version="1.1" class="svg" height="400px">
           <!--下右下-->
           <path d="M100 0 L 100 65 , 180 65,180 115" class="path"/>
           <path fill="none" stroke="" d="M95 -5 L 95 60,175 60,175 110" id="yellow"/>
           <!--下左下-->
           <path d="M300 0 L 300 65 , 220 65,220 115" class="path"/>
           <path fill="none" stroke="" d="M295 -5 L 295 60,215 60,215 110" id="red"/>
           <!--下左-->
           <path d="M0 275 L 150 275 , 150 235" class="path"/>
           <path fill="none" stroke="" d="M145 230 L 145 270,-5 270" id="orange"/>
           <!--上左-->
           <path d="M0 300 L 150 300 , 150 340" class="path"/>
           <path fill="none" stroke="" d="M145 335 L 145 295,-5 295" id="green"/>
           <!--左上-->
           <path d="M390 275 L 220 275 , 220 235" class="path"/>
           <path fill="none" stroke="" d="M385 270 L 215 270 , 215 230" id="blue"/>
         </svg>
         <div class="yellow" style="background-color: yellow;width: 10px;height: 10px"></div>
         <div class="red" style="background-color: red;width: 10px;height: 10px"></div>
         <div class="orange" style="background-color: orange;width: 10px;height: 10px"></div>
         <div class="green" style="background-color: green;width: 10px;height: 10px"></div>
         <div class="blue" style="background-color: blue;width: 10px;height: 10px"></div>
       </article>
     </section>
     <Button @click="stop">停止</Button>
     <Button @click="start">开始</Button>
     <Button @click="reset">重置</Button>
   </div>
 </template>

 <script>
 import anime from 'animejs'

 export default {
   data () {
     return {
       yellow: undefined,
       red: undefined,
       orange: undefined,
       green: undefined,
       blue: undefined
     }
   },
   methods: {
     stop () {
       const self = this
       self.yellow.pause()
       self.red.pause()
       self.orange.pause()
       self.green.pause()
       self.blue.pause()
     },
     start () {
       const self = this
       self.yellow.play()
       self.red.play()
       self.orange.play()
       self.green.play()
       self.blue.play()
     },
     reset () {
       const self = this
       self.yellow.reset()
       self.red.reset()
       self.orange.reset()
       self.green.reset()
       self.blue.reset()
     }
   },
   mounted () {
     const self = this
     let yellowPath = anime.path('#yellow')
     let redPath = anime.path('#red')
     let orangePath = anime.path('#orange')
     let greenPath = anime.path('#green')
     let bluePath = anime.path('#blue')
     self.yellow = anime({
       targets: '.yellow',
       // 沿着路径对象的x值
       translateX: yellowPath('x'),
       // 沿着路径对象的y值
       translateY: yellowPath('y'),
       easing: 'linear',
       duration: 10000,
       loop: true
     })
     self.red = anime({
       targets: '.red',
       // 沿着路径对象的x值
       translateX: redPath('x'),
       // 沿着路径对象的y值
       translateY: redPath('y'),
       easing: 'linear',
       duration: 10000,
       loop: true
     })
     self.orange = anime({
       targets: '.orange',
       // 沿着路径对象的x值
       translateX: orangePath('x'),
       // 沿着路径对象的y值
       translateY: orangePath('y'),
       easing: 'linear',
       duration: 10000,
       loop: true
     })
     self.green = anime({
       targets: '.green',
       // 沿着路径对象的x值
       translateX: greenPath('x'),
       // 沿着路径对象的y值
       translateY: greenPath('y'),
       easing: 'linear',
       duration: 10000,
       loop: true
     })
     self.blue = anime({
       targets: '.blue',
       // 沿着路径对象的x值
       translateX: bluePath('x'),
       // 沿着路径对象的y值
       translateY: bluePath('y'),
       easing: 'linear',
       duration: 10000,
       loop: true
     })
     self.blue.pause()
     self.yellow.pause()
     self.red.pause()
     self.orange.pause()
     self.green.pause()
   }
 }
 </script>

通过以上代码，最终可以生成如下图所示，点击开始，点就会跟着模拟路径跑，流动方向请看代码注释。