如何用JavaScript实现SVG textPath文本自定义定位到路径上方

你之前的方案不生效，核心是两个错误：

• 计算偏移的逻辑错误：直接取整条路径的外边界和文本外边界算高度差，忽略了<textPath>上的文本是沿路径逐点附着的，路径起点和终点本身Y坐标就不一样，全局平移整个<text>元素会导致终点文本偏移量完全失准。
• 坐标体系没对齐：getBoundingClientRect()取的是浏览器视口坐标，而你的路径外层套了带translate(70px,70px)的父容器，没有做坐标转换的话算出来的差值本身就带固定误差，再加上SVG坐标系Y轴向下增长，向上偏移需要用负值，你之前的计算逻辑完全没考虑这两点。

方案1：原生属性实现（推荐，无需JS） #

<textPath>原生支持dy属性，专门用来控制文本相对于附着路径的垂直偏移，向上偏移给负值即可，偏移量会自动适配路径的倾斜角度，始终保持文本在路径正上方：

<g class="avgLbl">
  <text text-anchor="start" stroke="red" fill="red">
    <!-- dy="-8" 即向上偏移8像素，可根据字号调整数值 -->
    <textPath href="#WorldAvg" startOffset="0%" dy="-8">10.3%</textPath>
  </text>
  <text text-anchor="end" stroke="red" fill="red">
    <textPath href="#WorldAvg" startOffset="100%" dy="-8">24.7%</textPath>
  </text>
</g>

注：你原来的文本只设置了stroke没有设置fill，文字会显示为空心，补上fill="red"后显示更清晰。

方案2：JS动态计算适配（适合动态渲染场景） #

如果需要根据路径粗细、字号自动计算偏移量，不要全局平移元素，通过路径API拿到文本附着点的坐标，再设置dy值即可，代码要在SVG渲染完成后执行：

window.addEventListener('load', () => {
  const path = document.querySelector('#WorldAvg');
  const labels = document.querySelectorAll('.avgLbl text');
  const pathTotalLength = path.getTotalLength();
  // 偏移量 = 路径线宽/2 + 预留间距，避免文字贴在路径线上
  const verticalOffset = 8;

  labels.forEach((text, index) => {
    // 定位当前文本对应的路径点位：起点对应长度0，终点对应路径总长度
    path.getPointAtLength(index === 0 ? 0 : pathTotalLength);
    // 直接设置dy属性，不使用transform避免破坏文本沿路径的对齐效果
    text.setAttribute('dy', `-${verticalOffset}`);
  })
})

• 不要给包裹textPath的<text>元素加全局transform偏移，会破坏文本沿路径切线方向自动旋转的对齐效果
• dy的偏移是沿路径法线方向生效的，不管路径是水平、向上倾斜还是向下倾斜，都能保证文本始终在路径正上方
• 如果需要调整文本和路径的间距，直接修改dy的数值即可，数值越负离路径越远。

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