如何计算SVG路径线条中心点以定位foreignObject至中心？

这个问题其实很常见，SVG原生就提供了简单的API来解决，不用手动去计算贝塞尔曲线的中点（那可是个大麻烦）。咱们直接上手：

核心思路 #

SVG的<path>元素有两个关键方法：

• getTotalLength()：返回路径的总长度（以用户单位计算）
• getPointAtLength(distance)：返回路径上距离起点distance长度处的坐标点

我们只需要取路径总长度的一半，就能拿到路径的中点，再调整foreignObject的位置让它的中心和这个中点对齐就行。

具体步骤和代码实现 #

1. 获取DOM元素：先拿到你的路径和foreignObject节点
2. 计算路径中点：用上面提到的两个方法获取中点坐标
3. 调整foreignObject位置：因为它的x/y是左上角坐标，所以要减去自身宽高的一半来让中心对齐

下面是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<svg>
  <g stroke-linecap="round" data-linkid="36141ffc-14b0-4375-9d40-8d002ac597fc" stroke-opacity="0" stroke-width="20" >
    <svg>
      <path stroke-width="10" stroke="rgba(255,0,0,0.5)" d="M68.6875,52.6875 C 68.6875,102.6875 379.6875,331.6875 379.6875,381.6875" tets="Fd" ></path>
      <foreignObject id="foreignObj" x="50" y="50" height="100" width="40">
        <div xmlns="http://www.w3.org/1999/xhtml">
          <h1>HI</h1>
        </div>
      </foreignObject>
    </svg>
  </g>
</svg>
<script>
// 等待DOM完全加载再执行
document.addEventListener('DOMContentLoaded', () => {
  const path = document.querySelector('path');
  const foreignObj = document.getElementById('foreignObj');
  
  // 获取路径的总长度
  const totalPathLength = path.getTotalLength();
  // 计算中点坐标
  const midPoint = path.getPointAtLength(totalPathLength / 2);
  
  // 如果foreignObject的尺寸是固定的，直接用属性值
  const objWidth = parseInt(foreignObj.getAttribute('width'));
  const objHeight = parseInt(foreignObj.getAttribute('height'));
  
  // 让foreignObject的中心对齐路径中点
  foreignObj.setAttribute('x', midPoint.x - objWidth / 2);
  foreignObj.setAttribute('y', midPoint.y - objHeight / 2);
  
  // 🌟 如果内容是动态尺寸，用getBBox()获取实际大小更准确
  // const bbox = foreignObj.getBBox();
  // foreignObj.setAttribute('x', midPoint.x - bbox.width / 2);
  // foreignObj.setAttribute('y', midPoint.y - bbox.height / 2);
});
</script>
</body>
</html>

额外说明 #

• 这个方法对任何类型的SVG路径都有效，不管是直线、曲线还是复杂路径
• 如果你的路径在后续有变化（比如动画修改了d属性），只需要重新执行一遍计算逻辑就能更新位置

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