svg画动态虚线

SVG画虚线相对canvas容易些

代码语言：javascript复制

<template>
  <div style="position:relative;">
    <el-button @click="goggle">切换</el-button>
    <div>123</div>
    <svg>
      <polyline
        class="shap"
        points="20,20 40,25 60,40 80,120 120,140 200,180"
        stroke-dasharray="15 4"
        style="fill:none;stroke:black;stroke-width:4"
      />
    </svg>
  </div>
</template>

代码语言：javascript复制

<script>
export default {
  name: "barChart",
  data() {
    return {};
  },
  mounted() {},
  methods: {
    goggle(){
      let element = document.querySelector("polyline")
      element.classList.toggle("shap")
      // 也可以使用下面的方法
      // if(element.classList.contains("shap")){
      //   element.classList.remove("shap")
      // }else{
      //   element.classList.add("shap")
      // }
    }
  }
};
</script>

代码语言：javascript复制

<style scoped>
svg {
  position: absolute;
  left: 0;
  top: 30px;
}
.shap {
  animation: shine 0.6s infinite linear;
}
/* dasharray 加起来15 4 = 19*/
@keyframes shine {
  0% {
    stroke-dashoffset: 19px;  
  }
  100% {
    stroke-dashoffset: 0px;
  }
}
</style>

svg canvas

0 人点赞