如何在动态生成的单行SVG <text>元素末尾定位path？

当然可以做到，给你两个实用的实现思路：

• 用getBBox()获取文本实际宽度
  动态生成<text>元素并添加到SVG后，直接调用该元素的getBBox()方法，能拿到文本的精确边界框（包含实际宽度、高度等信息）。接着就能计算出文本末尾的坐标，以此作为path的起始点。
  示例代码：

  <svg id="mySvg" width="400" height="100"></svg>
  <script>
    const svg = document.getElementById('mySvg');
    // 动态生成文本
    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
    text.setAttribute('x', 20);
    text.setAttribute('y', 50);
    text.setAttribute('font-size', 20);
    text.textContent = '这是动态生成的文本';
    svg.appendChild(text);
  
    // 获取文本边界框
    const textBBox = text.getBBox();
    // 计算文本末尾的坐标
    const endX = text.getAttribute('x') * 1 + textBBox.width;
    const endY = text.getAttribute('y') * 1;
  
    // 创建并定位path
    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    // 从文本末尾画一条向右的线段，示例
    path.setAttribute('d', `M ${endX} ${endY} L ${endX + 50} ${endY}`);
    path.setAttribute('stroke', 'red');
    path.setAttribute('stroke-width', 2);
    svg.appendChild(path);
  </script>
  

  注意：如果文本元素应用了transform变换，需要结合getCTM()方法转换坐标，保证位置精准。

• 统一容器配合实时计算
  把文本和path放在同一个<g>元素里，通过文本的位置动态调整path的起点，核心逻辑还是依赖getBBox()获取的宽度数据，适合需要整体移动文本和path的场景。

另外要注意，必须等文本元素被添加到SVG DOM树后再调用getBBox()，否则拿不到正确的边界信息。

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