svg全链路流程轨迹

直接上效果

<template>
  <div class="right-page">
    <div class="container">
      <div class="line-wrap">
        <svg
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          xml:space="preserve"
          class="circle-load-rect-svg"
          viewBox="0 0 600 400"
        >
          <defs>
            <pattern
              id="line-pattern"
              patternUnits="userSpaceOnUse"
              width="80"
              height="30"
            >
              <image
                xlink:href="../../assets/1.png"
                x="-5"
                y="8"
                width="80"
                height="30"
              />
            </pattern>
          </defs>
          <polyline
            :points="svgData[0]"
            fill="none"
            class="g-rect-path"
            stroke="green"
          />
          <!-- stroke="url(#line-pattern)" -->
          <polyline
            :points="svgData[0]"
            fill="none"
            class="g-rect-fill"
            stroke="pink"
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      svgData: ["0,200 200,200 300,300 400,300 400,200 500,200"],
    };
  },
  computed: {},
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="scss">
.circle-load-rect-svg {
  width: 800px;
}

.g-rect-path {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.g-rect-fill {
  fill: none;
  stroke-width: 10;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 10, 800;
  stroke-dashoffset: 0;

  animation: lineMove 5s cubic-bezier(0, 0, 0.74, 0.74) infinite;
}

@keyframes lineMove {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -800;
  }
}
</style>