如何在SVG.js中获取动态生成文本的坐标位置

以下是可直接落地的解决步骤：

• 确保元素已完成挂载
  生成文本后必须先将其添加到SVG画布或父级容器中，未挂载的元素不存在实际布局，无法计算正确位置。参考代码：

  const canvas = SVG().addTo('#svg-container').size(500, 500)
  // 生成动态文本后挂载到画布
  const textEl = canvas.text('动态文本内容').move(50, 50).font({ family: 'Arial', size: 20 })
  

• 等待重绘完成后再读取位置
  动态生成的元素需要等浏览器完成一次重绘才能得到正确的布局参数，用requestAnimationFrame包裹位置读取逻辑即可：

  requestAnimationFrame(() => {
    // 获取实际渲染后的边界盒参数
    const textBbox = textEl.bbox()
    // 输出x、y为文本左上角的实际坐标
    console.log('文本实际位置：', textBbox.x, textBbox.y)
    // 输出文本实际渲染宽高
    console.log('文本实际尺寸：', textBbox.width, textBbox.height)
  })
  

• 选择正确的API读取位置
  不要直接读取x/y属性，这类属性仅返回手动设置的固定值，不会包含字体渲染、行高、多行文本次生的偏移，优先使用bbox()获取相对于SVG画布的绝对位置，需要获取相对于父容器的位置时可以调用rbox()方法。

避坑提示：不要使用offsetLeft/offsetTop等HTML元素专属的位置属性读取SVG元素，SVG元素不参与HTML布局流，这类属性返回值无效。

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