如何画svg路径图

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

废话不多说，直接上代码

  1 <style>  2   .green {  3     position: absolute;  4   }  5 一诺千金故事  6   .blue {  7     position: absolute;  8   }  9  10   .yellow { 11     position: absolute; 12   } 13  14   .red { 15     position: absolute; 16   } 17   .orange { 18     position: absolute; 19   } 20   .path { 21     width: 300px; 22     height: 150px; 23     stroke: pink; 24     stroke-width: 10; 25     stroke-dasharray: 15, 5; 26     fill: transparent; 27     display: block; 28     position: absolute; 29   } 30  31   .article { 32     display: flex; 33     flex-direction: column; 34     position: relative; 35     width: 100%; 36     min-height: 8rem; 37     margin-bottom: 1rem; 38     padding: 1rem; 39   } 40 </style> 41 <template> 42   <div> 43     <ction style="display: flex; 44     flex-direction: column; 45     position: relative; 46     width: 100%; 47     max-width: 30rem; 48     margin: auto; 49     text-align: center;"> 50       <article class="article"> 51         <svg version="1.1" class="svg" height="400px"> 52           <!--下右下--> 53           <path d="m100 0 l 100 65 , 180 65,180 115" class="path"/> 54           <path fill="none" stroke="" d="m95 -5 l 95 60,175 60,175 110" id="yellow"/> 55           <!--下左下--> 56           <path d="m300 0 l 300 65 , 220 65,220 115" class="path"/> 57           <path fill="none" stroke="" d="m295 -5 l 295 60,215 60,215 110" id="red"/> 58           <!--下左--> 59           <path d="m0 275 l 150 275 , 150 235" class="path"/> 60           <path fill="none" stroke="" d="m145 230 l 145 270,-5 270" id="orange"/> 61           <!--上左--> 62           <path d="m0 300 l 150 300 , 150 340" class="path"/> 63           <path fill芦荟提取物="none" stroke="" d="m145 335 l 145 295,-5 295" id="green"/> 64           <!--左上--> 65           <path d="m390 275 l 220 275 , 220 235" class="path"/> 66           <path fill="none" stroke="" d="m385 270 l 215 270 , 215 230" id="blue"/> 67         </svg> 68         <div class="yellow" style="background-color: yellow;width: 10px;height: 10px"></div> 69         <div class="red" style="background-color: red;width: 10px;height: 10px"></div> 70         <div class="orange" style="background-color: orange;width: 10px;height: 10px"></div> 71         <div class="green" style="background-color: green;width: 10px;height: 10px"></div> 72         <div class="blue" style="background-color: blue;width: 10px;height: 10px"></div> 73       </article> 74     </ction> 75     <button @click="stop">停止</button> 76     <button @click="start">开始</button> 77     <button @click="ret">重置</button> 78   </div> 79 </template> 80  81 <script> 82 import anime from 'animejs' 83  84 export default { 85   data () { 86     return { 87       yellow: undefined, 88       red: undefined, 89       orange: undefined, 90       green: undefined, 91       blue: undefined 92     } 93   }, 94   methods: { 95     stop () { 96       const lf = this 97       lf.yellow.pau() 98       lf.red.pau() 99       lf.orange.pau()100       lf.green.pau()101       lf.blue.pau()102     },103     start () {104       const lf = this105       lf.yellow.play()106       lf.red.play()107       lf.orange.play()108       lf.green.play()109       lf.blue.play()110     },111     ret () {112       const lf = this113       lf.yellow.ret()114       lf.red.ret()115       lf.orange.ret()116       lf.green.ret()117       lf.blue.ret()118     }119   },120   mounted () {121     const lf = this122     let yellowpa我和爸爸th = anime.path('#yellow')123     let redpath = anime.path('#red')124     let orangepath = anime.path('#orange')125     let greenpath = anime.path('#green')126     let bluepath = anime.path('#blue')127     lf.yellow装潢设计专业 = anime({128       targets: '.yellow',129       // 沿着路径对象的x值130       translatex: yellowpath('x'),131       // 沿着路径对象的y值132       translatey: yellowpath('y'),133       easing: 'linear',134       duration: 10000,135       loop: true136     })137     lf.red = anime({138       targets: '.red',139       // 沿着路径对象的x值140       translatex: redpath('x'),141       // 沿着路径对象的y值142       translatey: redpath('y'),143       easing: 'linear',144       duration: 10000,145       loop: true146     })147     lf.orange = anime({148       targets: '.orange',149       // 沿着路径对象的x值150       translatex: orangepath('x'),151       // 沿着路径对象的y值152       translatey: oran书痴gepath('y'),153       easing: 'linear',154       duration: 10000,155       loop: true156     })157     lf.green = anime({158       targets: '.green',159       // 沿着路径对象的x值160       translatex: greenpath('x'),161       // 沿着路径对象的y值162       translatey: greenpath('y'),163       easing: 'linear',164       duration: 10000,165       loop: true166     })167     lf.blue = anime({168       targets: '.blue',169       // 沿着路径对象的x值170       translatex: bluepath('x'),171       // 沿着路径对象的y值172       translatey: bluepath('y'),173       easing: 'linear',174       duration: 10000,175       loop: true176     })177     lf.blue.pau()178     lf.yellow.pau()179     lf.red.pau()180     lf.orange.pau()181     lf.green.pau()182   }183 }184 </script>

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