如何获取两个div的实时位置并动态更新二者间的连接线

核心实现逻辑 #

• 计算两个待连接元素的中心点坐标
• 采用SVG绘制连接线，直接绑定两个端点坐标即可，无需额外计算线段长度、旋转角度
• 选择合适的时机触发连接线更新，避免无效性能消耗

完整代码实现 #

HTML 结构 #

<!-- 待连接的元素示例 -->
<div class="connect-element" id="el1" style="width:100px;height:50px;background:#eee;position:absolute;left:50px;top:50px;"></div>
<div class="connect-element" id="el2" style="width:100px;height:50px;background:#eee;position:absolute;left:300px;top:200px;"></div>

<!-- 全局SVG连接线容器，放在页面根节点底部，层级设为最高且不阻挡交互 -->
<svg id="lineSvg" style="position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9999">
  <line id="connectLine" stroke="#409eff" stroke-width="2" stroke-linecap="round"></line>
</svg>

JS 逻辑 #

// 获取元素中心点坐标，兼容滚动偏移
function getElCenter(el) {
  const rect = el.getBoundingClientRect()
  return {
    x: rect.left + rect.width / 2 + window.scrollX,
    y: rect.top + rect.height / 2 + window.scrollY
  }
}

const line = document.getElementById('connectLine')
const el1 = document.getElementById('el1')
const el2 = document.getElementById('el2')

// 更新连接线位置
function updateLine() {
  const p1 = getElCenter(el1)
  const p2 = getElCenter(el2)
  line.setAttribute('x1', p1.x)
  line.setAttribute('y1', p1.y)
  line.setAttribute('x2', p2.x)
  line.setAttribute('y2', p2.y)
}

// 适配jQuery动画场景，在动画每一帧触发更新
$('.connect-element').animate(
  { 'margin-left':'200px', 'margin-top':'70px' },
  {
    duration: 3000,
    step: updateLine
  }
)

// 适配页面滚动、窗口尺寸变化场景
window.addEventListener('scroll', updateLine)
window.addEventListener('resize', updateLine)

// 若元素位置会被其他非动画逻辑修改，可使用requestAnimationFrame持续更新，性能远高于setInterval
function syncLoop() {
  updateLine()
  requestAnimationFrame(syncLoop)
}
syncLoop()

优化说明 #

• 优先使用动画step回调触发更新，仅在动画运行时计算位置，无额外性能开销
• 采用SVG实现连接线，支持自定义虚线、渐变、端点样式等需求，兼容性好
• 内置滚动、resize适配，可覆盖绝大多数元素位置变化场景

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