VUE3.0中使用SVG绘制折线箭头，并且添加线条流动动画
svg标签使用 SVG 代码
SVG 代码包括开启标签 svg 和关闭标签 /svg 。这是根元素。width 和 属性可设置此 SVG 文档的宽度和高度。 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
<svg></svg>
预定义形状元素
SVG 有一些预定义的形状元素，可被开发者使用和操作：
defs 标签
defs 标签是 的缩写，它可对诸如渐变之类的特殊元素进行定义。
<defs></defs>
折线箭头绘制示例
中的-end去绑定对应的的Id，refX为箭头在折线末端相对于X轴的偏移量
<template><div><svg :height="height" :width="width"><defs><markerid="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参数值控制所要展示的箭头样式
的值代表了折线的路径’0,130 200,130 390,130’：折线从(0,130)这个点出发，经过(200,130)，最后到达(390,130)；分别代表了X轴和Y轴的值，起始点为(0,0)，在坐标轴的第四象限扩展，从上到下，从左到右。最大值为svg标签定义的width和
<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>
我这里默认为虚线了，控制的就是折线的样式
<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组成，添加了动画以后，数据线条向两侧流动
左侧：=" '100,60 0,60"
右侧：="'0,60 100,60"
