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

VUE3.0中使用SVG绘制折线箭头折线箭头绘制示例示例
svg标签使用 SVG 代码
SVG 代码包括开启标签 svg 和关闭标签 /svg。这是根元素。width 和属性可设置此 SVG 文档的宽度和高度。属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
>
预定义形状元素
SVG 有一些预定义的形状元素，可被开发者使用和操作：
defs 标签
defs 标签是的缩写，它可对诸如渐变之类的特殊元素进行定义。

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

:height="height" :width="width">

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

文章插图

="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 = http://www.kingceram.com/post/prop.setClass;});const className = ref('edge');//改变折线样式，一般用于监听鼠标移入移出动作后，调用该函数const clickNode = () => {className.value = http://www.kingceram.com/post/'edge focused';};//折线样式复原const reset = () => {className.value = http://www.kingceram.com/post/'edge';};//折线置灰const setGray = () => {className.value = http://www.kingceram.com/post/'edge gray';};return {className,clickNode,reset,setGray,};},});

我这里默认为虚线了，控制的就是折线的样式
【VUE3.0中使用SVG绘制折线箭头，并且添加线条流动动画】

="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;}}

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