如何计算SVG中使文本中部对齐圆形顶部的startOffset值

我想用SVG的<path>和<textPath>实现文本沿圆形路径渲染，并且让文本中部与圆形顶部对齐。已知可以通过startOffset属性调整文本位置，但不知道怎么用JavaScript计算这个属性的准确值。

基础SVG代码 #

<svg id="svg" width="500" height="500">
  <defs>
    <path d="M 180 200
        m -100, 0
        a 100,100 0 1,1 200,0
        a 100,100 0 1,1 -200,0
        " id="pathSlf6u6uz93">
    </path>
  </defs>
  <text x="50" y="50">
    <textPath xlink:href="#pathSlf6u6uz93">Curved text testing</textPath>
  </text>
  <path d="M 180 200
        m -100, 0
        a 100,100 0 1,1 200,0
        a 100,100 0 1,1 -200,0
        " style="" fill="rgba(0,0,0,0)" stroke="#000000">
  </path>
</svg>

使用startOffset的示例代码（待计算准确值） #

<svg id="svg" width="500" height="500">
  <defs>
    <path d="M 180 200
        m -100, 0
        a 100,100 0 1,1 200,0
        a 100,100 0 1,1 -200,0
        " id="pathSlf6u6uz93">
    </path>
  </defs>
  <text x="50" y="50">
    <textPath xlink:href="#pathSlf6u6uz93" startOffset="45">Curved text testing</textPath>
  </text>
  <path d="M 180 200
        m -100, 0
        a 100,100 0 1,1 200,0
        a 100,100 0 1,1 -200,0
        " style="" fill="rgba(0,0,0,0)" stroke="#000000">
  </path>
</svg>

我的最终目标是实现类似Canva的文本弯曲效果：

计算startOffset的方法 #

要实现文本中部对齐圆形顶部，需要分三步计算：

1. 获取圆形路径的总长度
   用SVG原生方法直接获取路径实际长度，无需手动计算圆周长：

   const path = document.getElementById('pathSlf6u6uz93');
   const pathTotalLength = path.getTotalLength();
   

2. 获取文本的实际渲染长度
   确保文本元素已渲染后，获取其真实长度（受字体、字号影响）：

   const textElement = document.querySelector('text');
   const textLength = textElement.getComputedTextLength();
   

3. 计算startOffset值
   你的圆形路径从右侧点（m -100,0）开始顺时针绘制，圆形顶部对应路径总长度的1/4处。要让文本中部对齐该点，需将文本起点向左偏移自身长度的一半，最终公式：

   // 转换为百分比，适配SVG缩放场景
   const startOffsetPercent = ((pathTotalLength / 4 - textLength / 2) / pathTotalLength) * 100;
   

完整JavaScript实现代码 #

// 确保SVG加载完成后执行
window.addEventListener('load', () => {
  const path = document.getElementById('pathSlf6u6uz93');
  const textPath = document.querySelector('textPath');
  const textElement = textPath.parentElement;

  const pathTotalLength = path.getTotalLength();
  const textLength = textElement.getComputedTextLength();
  const startOffset = ((pathTotalLength / 4 - textLength / 2) / pathTotalLength) * 100;

  textPath.setAttribute('startOffset', `${startOffset}%`);
});

注意事项 #

• 修改文本字体、字号后，需重新计算textLength和startOffset；
• 若路径改为逆时针绘制，顶部对应路径总长度的3/4处，需将公式中的pathTotalLength / 4替换为pathTotalLength * 3/4；
• 优先使用百分比形式的startOffset，比绝对值更适配SVG缩放。

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