如何根据div宽高将SVG textPath文本视觉居中且不修改路径d属性

现有一段通过SVG路径连接两个div中心的代码，但文本“T”因div宽高变化无法实现视觉居中。要求在不修改路径d属性的前提下，实现文本视觉居中，且适配div宽高及位置的动态变化。

原始代码 #

HTML #

<div id="item1"></div>
<div id="item2" style="width:10rem; height:3rem"></div>

<svg id="svg1" style="overflow:visible">
  <path id="path1" fill="none" stroke="red" stroke-width="3" />
  <text font-size="24" dy="-10" text-anchor="middle">
    <textPath href="#path1"  fill="green" startOffset="50%">T</textPath>
  </text>
</svg>

CSS #

*{
  margin:0;
}
div{
  height:2rem;
  width:2rem;
  position:absolute;
  background-color:black;
  box-sizing:border-box;
}

JavaScript #

item1.style.top="20px";
item1.style.left="20px";

item2.style.top="40px";
item2.style.left="160px";

var x1=parseFloat(item1.style.left)+ item1.offsetWidth / 2;
var y1=parseFloat(item1.style.top) + item1.offsetHeight / 2;

var x2=parseFloat(item2.style.left) + item2.offsetWidth / 2; 
var y2=parseFloat(item2.style.top)  + item2.offsetHeight / 2;

path1.setAttribute("d",`M ${x1} ${y1} L ${x2} ${y2}`)

解决方案 #

核心是利用SVG文本布局属性结合动态计算，无需修改路径d属性即可实现适配性居中：

1. 基础适配：调整文本基线 #

修改<text>元素的对齐属性，替换固定dy值，让文本垂直中线自动对齐路径：

<text font-size="24" text-anchor="middle" dominant-baseline="middle">
  <textPath href="#path1" fill="green" startOffset="50%">T</textPath>
</text>

• dominant-baseline="middle"：使文本垂直中线与路径重合，解决固定dy无法适配不同字体/路径的问题。
• text-anchor="middle" + startOffset="50%"：确保文本始终处于路径的水平中点。

2. 动态适配：支持div实时变化 #

如果div的位置或宽高会动态更新，添加实时计算逻辑，确保文本居中状态同步更新：

function updateConnection() {
  const item1 = document.getElementById('item1');
  const item2 = document.getElementById('item2');
  const path1 = document.getElementById('path1');
  const textEl = document.querySelector('text');

  // 更新路径坐标
  const x1 = parseFloat(item1.style.left) + item1.offsetWidth / 2;
  const y1 = parseFloat(item1.style.top) + item1.offsetHeight / 2;
  const x2 = parseFloat(item2.style.left) + item2.offsetWidth / 2;
  const y2 = parseFloat(item2.style.top) + item2.offsetHeight / 2;
  path1.setAttribute("d", `M ${x1} ${y1} L ${x2} ${y2}`);

  // 微调文本偏移（针对特殊字体基线偏差）
  const textBBox = textEl.getBBox();
  textEl.setAttribute('dy', -textBBox.height / 2);
}

// 初始执行
updateConnection();

// 示例：监听div变化（可替换为MutationObserver监听属性修改）
// document.querySelector('.update-trigger').addEventListener('click', updateConnection);

关键优势 #

• 完全不修改路径d属性，保留原路径逻辑。
• 自动适配div的位置、宽高变化，无需硬编码偏移值。
• 适配不同字体和路径角度，视觉居中效果稳定。

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