flex布局中两个div间添加SVG连接线如何计算空隙长度

计算方法 #

你可以直接通过浏览器提供的元素尺寸API实时计算空隙长度，不受子元素内容变化影响：

• 首先调用getBoundingClientRect()分别获取两个子元素、父元素的位置与尺寸信息
• 空隙长度 = 右侧子元素的左边界坐标 - 左侧子元素的右边界坐标

完整实现示例 #

1. 调整CSS #

给父容器加相对定位，方便后续SVG线条定位：

.parent{
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: relative; /* 新增 */
}

2. 插入SVG线条容器 #

在两个子元素之间插入全屏覆盖父容器的SVG：

<div class='parent'>
 <div class='Hi'>
   Hi there this is A
 </div>
 <!-- 新增SVG容器，pointer-events:none避免阻挡交互 -->
 <svg style="position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;">
   <line id="connectLine" stroke="#333" stroke-width="2" />
 </svg>
 <div class='apple'>
   Hi A
  </div>
</div>

3. 计算空隙并渲染线条 #

function updateConnectLine() {
  // 获取元素实例
  const leftEl = document.querySelector('.Hi')
  const rightEl = document.querySelector('.apple')
  const parentEl = document.querySelector('.parent')
  const lineEl = document.getElementById('connectLine')

  // 获取各元素位置信息
  const parentRect = parentEl.getBoundingClientRect()
  const leftRect = leftEl.getBoundingClientRect()
  const rightRect = rightEl.getBoundingClientRect()

  // 计算空隙长度（如果只需要长度直接取这个值即可）
  const gapLength = rightRect.left - leftRect.right
  // 计算线条相对父容器的坐标
  const x1 = leftRect.right - parentRect.left
  const x2 = rightRect.left - parentRect.left
  // 取两个子元素垂直中点作为线条的y坐标
  const y = (leftRect.top + leftRect.height/2) - parentRect.top

  // 给线条赋值属性
  lineEl.setAttribute('x1', x1)
  lineEl.setAttribute('x2', x2)
  lineEl.setAttribute('y1', y)
  lineEl.setAttribute('y2', y)
}

// 初始化渲染
updateConnectLine()
// 窗口大小变化时重新计算
window.addEventListener('resize', updateConnectLine)
// 如果子元素内容会动态更新，内容变化后手动调用updateConnectLine()即可

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