使用FabricJS的canvas.toSVG导出SVG时文本右移问题求助

常见原因及排查方向 #

1. 文本锚点配置错误
   FabricJS里的originX属性决定文本对象的锚点位置，哪怕textAlign设为左对齐，只要originX不是'left'，导出SVG时就会因为锚点偏移导致文本位置出错。

2. 手动强制设置文本宽度
   如果给文本对象手动指定了width，且该宽度大于文本实际渲染宽度，FabricJS会自动调整文本在容器内的位置，导出SVG时会保留这个偏移逻辑。

3. FabricJS版本bug
   部分旧版本的FabricJS在文本SVG导出环节存在对齐计算的bug，升级到最新稳定版可能直接解决问题。

具体解决方法 #

1. 创建文本时配置正确属性

创建文本对象时明确指定锚点和对齐方式，避免手动设置宽度：

// 正确的文本对象创建配置
const textItem = new fabric.Text('目标文本内容', {
  left: 30,
  top: 30,
  textAlign: 'left',
  originX: 'left', // 核心：锚点设为左侧
  // 不要添加width属性，让FabricJS自动计算文本实际宽度
});
canvas.add(textItem);

2. 导出前修正已有文本对象属性

如果画布中已存在文本对象，导出前遍历修正关键属性：

// 遍历画布所有文本对象，修正属性
canvas.getObjects().forEach(obj => {
  if (obj.type === 'text') {
    obj.set({
      originX: 'left',
      textAlign: 'left',
      width: undefined // 清除手动设置的宽度值
    });
    obj.setCoords(); // 更新对象坐标计算逻辑
  }
});

// 执行导出
const svgResult = canvas.toSVG();

3. 手动修正导出的SVG源码（临时方案）

如果上述方法无效，可直接检查导出的SVG文本元素：

• 确保text-anchor属性值为start（对应FabricJS的左对齐）
• 检查transform属性是否包含多余的偏移参数，比如错误的translate值

示例正确的SVG文本元素：

<text x="30" y="45" text-anchor="start" font-size="20">目标文本内容</text>

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