document.querySelector('.mapimg .elementor-widget-container').append(document.querySelector('.mapboxs'));function drawCurvedLines() { const svg = document.getElementById('line-canvas'); const labels = document.querySelectorAll('.label:not(.center)'); const centerLabel = document.querySelector('.label.center'); // 获取容器尺寸，用于将百分比转为像素坐标（SVG path不支持百分比Q命令） const containerRect = svg.getBoundingClientRect(); const w = containerRect.width; const h = containerRect.height;// 获取中心点像素坐标 const cx = (parseFloat(centerLabel.style.left) / 100) * w; const cy = (parseFloat(centerLabel.style.top) / 100) * h;// 清空现有线条 svg.innerHTML = '';labels.forEach(label => { // 获取目标点像素坐标 const lx = (parseFloat(label.style.left) / 100) * w; const ly = (parseFloat(label.style.top) / 100) * h;// --- 计算二次贝塞尔曲线控制点 --- // 1. 求中点 const midX = (cx + lx) / 2; const midY = (cy + ly) / 2;// 2. 计算偏移量（控制弧度） // 这里的逻辑是：将中点向上(Y轴减小)偏移 连线X轴距离的 0.2 倍 // 这样长距离的线弧度大，短距离的线弧度小。 const offsetX = 0; const offsetY = -Math.abs(cx - lx) * 0.2 - 20; // 基础向上偏移20px，再加上距离相关的弧度const qx = midX + offsetX; const qy = midY + offsetY;// --- 创建 SVG Path --- const path = document.createElementNS("http://www.w3.org/2000/svg", "path"); // 构建 M (MoveTo) 和 Q (Quadratic Bezier) 命令 // 格式: M 起点X 起点Y Q 控制点X 控制点Y 终点X 终点Y const d = `M ${cx} ${cy} Q ${qx} ${qy} ${lx} ${ly}`; path.setAttribute("d", d); path.setAttribute("class", "connection-arc"); svg.appendChild(path); }); }// 初始化画线 drawCurvedLines();// 窗口大小变化时必须重绘，因为涉及到像素计算 window.addEventListener('resize', drawCurvedLines);