VUE3.0中使用SVG绘制折线箭头，并且添加线条流动动画

svg标签使用

SVG 代码

SVG 代码包括开启标签 svg 和关闭标签 /svg 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

<svg></svg>

预定义形状元素

SVG 有一些预定义的形状元素，可被开发者使用和操作：

• 矩形 rect
• 圆形 circle
• 椭圆 ellipse
• 线 line
• 折线 polyline
• 多边形polygon
• 路径 path

defs 标签

defs 标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。

<defs></defs>

折线箭头绘制示例

polyline中的marker-end去绑定对应的marker的Id，refX为箭头在折线末端相对于X轴的偏移量

<template>
  <div>
    <svg :height="height" :width="width">
      <defs>
        <marker
          id="end-arrow1"
          class="end-arrow"
          fill="#008CFF"
          markerUnits="strokeWidth"
          viewBox="0 0 10 10"
          refX="9"
          refY="3.5"
          markerWidth="10"
          markerHeight="10"
          orient="auto"
        >
          <polygon points="0 0, 10 3.5, 0 7"></polygon>
        </marker>
      </defs>
      <polyline
        :class="className"
        stroke="#008CFF"
        :points="points"
        :marker-end="'url(#end-arrow' + index + ')'"
      />
    </svg>
  </div>
</template>

函数部分主要通过改变绑定的class类来改变所要展示的折线样式
index参数值控制所要展示的箭头样式
points的值代表了折线的路径’0,130 200,130 390,130’：折线从(0,130)这个点出发，经过(200,130)，最后到达(390,130)；分别代表了X轴和Y轴的值，起始点为(0,0)，在坐标轴的第四象限扩展，从上到下，从左到右。最大值为svg标签定义的width和height

<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';

  export default defineComponent({
    name: 'svgpolyline',
    props: {
      points: {
        type: String,
        default: '0,130 200,130 390,130',
      },
      index: {
        default: 0,
      },
      height: {
        type: Number,
        default: 718,
      },
      width: {
        default: 400,
      },
      setClass: {
        default: '',
      },
    },
    setup(prop) {
      onMounted(() => {
        if (prop.setClass !== '') className.value = prop.setClass;
      });
      const className = ref('edge');
      //改变折线样式，一般用于监听鼠标移入移出动作后，调用该函数
      const clickNode = () => {
        className.value = 'edge focused';
      };
      //折线样式复原
      const reset = () => {
        className.value = 'edge';
      };
      //折线置灰
      const setGray = () => {
        className.value = 'edge gray';
      };
      return {
        className,
        clickNode,
        reset,
        setGray,
      };
    },
  });
</script>

我这里默认为虚线了，stroke控制的就是折线的样式

<style scoped lang="less">
  .edge {
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-dashoffset: 0;
    stroke-dasharray: 10;
    stroke-opacity: 1;
    fill: none;
  }
  .edge.gray {
    stroke: #b2cdeb;
  }
  .edge.focused {
    animation: 0.3s linear infinite circle-draw;
  }
  @keyframes circle-draw {
    0% {
      stroke-dashoffset: 20;
    }
    100% {
      stroke-dashoffset: 0;
    }
  }
</style>

示例

这里有左右两个svg组成，添加了focused动画以后，数据线条向两侧流动
左侧：points=" '100,60 0,60"
右侧：points="'0,60 100,60"