如何实现SVG线段文本随线段自动居中同步移动？

可以实现，不需要重复编写文本移动逻辑，有两种实用方案：

方案一：使用<textPath>自动居中（推荐） #

把<line>替换为<path>（因为<textPath>仅支持关联路径元素），通过设置startOffset="50%"和text-anchor="middle"，让文本自动沿线段居中，且线段位置/长度变化时文本会自动跟随。

示例代码：

<svg height="210" width="500">
  <!-- 用path替代line，供textPath引用 -->
  <path id="dynamicLine" d="M0 0 L200 200" style="stroke:rgb(255,0,0);stroke-width:2" />
  <!-- 绑定路径并设置居中 -->
  <text fill="#333">
    <textPath href="#dynamicLine" startOffset="50%" text-anchor="middle">Hello there</textPath>
  </text>
</svg>

当你用JavaScript修改<path>的d属性（比如调整线段端点）时，文本会自动保持在线段中心位置。

方案二：保留<line>，用JS计算中点 #

如果需要保留原始<line>元素，只需编写一次通用的位置更新函数，每次线段位置变化后调用即可：

示例代码：

<svg height="210" width="500">
  <line id="dynamicLine" x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  <text id="lineText" text-anchor="middle" dominant-baseline="middle" fill="#333">Hello there</text>
</svg>

<script>
// 通用更新文本位置函数
function syncTextToLine() {
  const line = document.getElementById('dynamicLine');
  const text = document.getElementById('lineText');
  
  // 计算线段中点坐标
  const midX = (parseFloat(line.getAttribute('x1')) + parseFloat(line.getAttribute('x2'))) / 2;
  const midY = (parseFloat(line.getAttribute('y1')) + parseFloat(line.getAttribute('y2'))) / 2;
  
  text.setAttribute('x', midX);
  text.setAttribute('y', midY);
}

// 初始化时同步位置
syncTextToLine();

// 后续修改线段位置后，调用syncTextToLine()即可
// 例如拖拽线段端点后、修改x1/x2/y1/y2属性后执行该函数
</script>

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