如何在JavaScript中于两个div端点间绘制不干扰元素的弧形？

刚好做过类似的需求，给你两个实用的方案，都能实现你要的「弧形在所有元素上方、不干扰其他内容」的效果：

SVG是矢量图形，缩放不失真，而且修改、维护起来比Canvas更方便，完全适合这种连接线场景。

实现步骤： #

1. 先在页面中添加一个全屏的SVG容器，通过定位让它脱离文档流，覆盖所有元素但不影响布局；
2. 利用SVG的path元素和椭圆弧命令A，基于你拿到的两个端点坐标绘制弧形；
3. 关键属性设置确保不干扰下层元素交互。

代码示例： #

<!-- 放在页面的<body>末尾即可 -->
<svg id="connection-svg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none;"></svg>

// 替换成你实际拿到的端点坐标
const startX = 150;
const startY = 250;
const endX = 400;
const endY = 350;

const svg = document.getElementById('connection-svg');

// 计算弧形的弯曲程度（可根据需求调整）
const dx = endX - startX;
const dy = endY - startY;
const distance = Math.sqrt(dx * dx + dy * dy);
const arcRadius = distance * 0.6; // 数值越大，弧形越平缓

// 创建SVG路径元素
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
// 椭圆弧命令格式：M 起点坐标 A 半径X 半径Y 旋转角度 大弧标志 扫掠标志 终点坐标
path.setAttribute('d', `M ${startX} ${startY} A ${arcRadius} ${arcRadius} 0 0 1 ${endX} ${endY}`);
path.setAttribute('stroke', '#2196F3'); // 线条颜色
path.setAttribute('stroke-width', '2'); // 线条粗细
path.setAttribute('fill', 'none'); // 不要填充内部

svg.appendChild(path);

核心属性说明： #

• position: fixed：让SVG脱离文档流，不会挤占其他元素的空间；
• z-index: 9999：确保SVG在所有元素的最上层（如果页面有更高的z-index，调大这个值即可）；
• pointer-events: none：最关键的设置，让SVG不拦截鼠标事件，下层的按钮、输入框等依然可以正常交互。

如果需要更复杂的动画效果，或者你更熟悉Canvas API，也可以用这个方案：

代码示例： #

<canvas id="connection-canvas" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; pointer-events: none;"></canvas>

const canvas = document.getElementById('connection-canvas');
const ctx = canvas.getContext('2d');

// 必须设置Canvas的实际宽高，避免图形拉伸
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 替换成你的端点坐标
const startX = 150;
const startY = 250;
const endX = 400;
const endY = 350;

// 用二次贝塞尔曲线绘制弧形，控制点决定弯曲方向和程度
const controlX = (startX + endX) / 2;
const controlY = (startY + endY) / 2 - 80; // 向上偏移80，数值越大弧度越明显

ctx.beginPath();
ctx.moveTo(startX, startY);
ctx.quadraticCurveTo(controlX, controlY, endX, endY);
ctx.strokeStyle = '#2196F3';
ctx.lineWidth = 2;
ctx.stroke();

• 如果页面存在滚动，你的端点坐标如果是相对于文档的，需要加上滚动偏移量：startX += window.scrollX、startY += window.scrollY，这样弧形会跟着元素一起滚动；
• 可以通过调整弧形的参数（比如SVG的A命令标志位、Canvas的控制点位置）来改变弧形的弯曲方向和弧度大小，直到符合你的视觉需求。

内容的提问来源于stack exchange，提问作者Jus10