vue svg弧线路线动画组件

先看效果

然后直接上代码

组件publicSvg.vue

<template>
	<svg style="background:rgba(0,0,0,0.1)" :width="svgObject.endX" :height="svgObject.endY"
		xmlns="http://www.w3.org/2000/svg">
		<path :d="pathD" fill="none" class="svg-path-flow">
		</path>
	</svg>
</template>

<script>
	export default {
		name: "PublicSvg",
		components: {},
		props: {
			svgObject: {
				type: Object,
				default: null
			}
		},
		computed: {
			controlend() {
				let x1 = this.svgObject.startX;
				let y1 = this.svgObject.startY;
				let x2 = this.svgObject.endX;
				let y2 = this.svgObject.endY;
				let PI = Math.PI;
				console.log(x2)
				console.log(y2)
				let angle = this.svgObject.angle;
				// 两点间的x轴夹角弧度
				let xAngle = Math.atan2((y2 - y1), (x2 - x1));
				// 转为角度
				xAngle = 360 * xAngle / (2 * PI);
				// 两点间的长度
				let L = Math.sqrt((y2 - y1) * (y2 - y1) + (x2 - x1) * (x2 - x1));
				// 计算等腰三角形斜边长度
				let L2 = L / 2 / Math.cos(angle * 2 * PI / 360);
				// 求第一个顶点坐标，位于下边
				let val1 = {};
				// 求第二个顶点坐标，位于上边
				let val2 = {};
				val1['x'] = x1 + Math.round(L2 * Math.cos((xAngle + angle) * 2 * PI / 360));
				val1['y'] = y1 + Math.round(L2 * Math.sin((xAngle + angle) * 2 * PI / 360));
				val2['x'] = x1 + Math.round(L2 * Math.cos((xAngle - angle) * 2 * PI / 360));
				val2['y'] = y1 + Math.round(L2 * Math.sin((xAngle - angle) * 2 * PI / 360));
				return {
					upPoint: val2, // 上方弧线
					downPoint: val1 // 下方弧线
				};
			},
			pathD() {
				return `M${this.svgObject.startX} ${this.svgObject.startY} Q${this.controlend.upPoint.x} ${this.controlend.upPoint.y} ${this.svgObject.endX} ${this.svgObject.endY}`;
			}
		},
		data() {
			return {};
		},
		created() {
			console.log(this.svgObject)
		},
		methods: {}
	}
</script>

<style lang="less" scoped>
	// 流光效果
	@keyframes path-flow {
		0% {
			stroke-dashoffset: 200;
			opacity: 0.3;
		}

		50% {
			stroke-dashoffset: 100;
			opacity: 0.8;
		}

		100% {
			stroke-dashoffset: 0;
			opacity: 0.3;
		}
	}

	.svg-path-flow {
		opacity: 0;
		stroke-width: 10px;
		stroke: #0055ff;
		stroke-dasharray: 100;
		stroke-dashoffset: 0;
		animation: path-flow 2s linear 2s infinite;
	}
</style>

然后是使用方法

<public-svg :svgObject="svgObject" />

import PublicSvg from "@/components/PublicSvg/PublicSvg.vue";
export default {
	components: {
		PublicSvg
	},
	data() {
		return {
			svgObject:{
				startX: 50,  //起始点X坐标
				startY: 50,  //起始点Y坐标
				endX: 500,  //结束点X坐标
				endY: 600,  //结束点Y坐标
				angle: 30  //弧线角度
			}
		};
	}
};

如图所示

弧线样式可以在style中自定义

参考文章：SVG path 标签根据两点和角度绘制弧线