使用fabric.loadSVGFromString加载SVG到Fabric.js时对象数组为空问题

我在使用Fabric.js的fabric.loadSVGFromString方法加载SVG内容时遇到问题：尽管SVG字符串有效，但回调返回的加载对象数组却为空。

代码示例 #

let state;

// 清空画布并将状态存储为SVG字符串
function clearCanvas() {
  state = canvas.toSVG();
  if (canvas.getObjects().length > 0) {
    canvas.getObjects().forEach((item) => canvas.remove(item));
  } else {
    console.warn("There is nothing to clear");
  }
}

// 从存储的SVG字符串恢复画布状态
function restoreCanvas() {
  if (state) {
    fabric.loadSVGFromString(state, (objects, options, error) => {
      if (error) {
        console.error("Error loading SVG:", error);
      } else {
        // 预期能获取到对象，但实际得到空数组
        console.log(objects);
        //canvas.clear();
        //canvas.add(...objects);
        //canvas.renderAll();
      }
    });
  }
}

补充细节 #

• clearCanvas函数用于清空画布，并将当前画布状态转为SVG字符串存入state变量
• restoreCanvas函数尝试通过fabric.loadSVGFromString重新加载SVG内容，但控制台打印的objects数组始终为空

已排查步骤 #

• 确认调用fabric.loadSVGFromString前，state变量确实包含有效的SVG字符串
• 加载过程中控制台未输出任何错误日志
• 使用极简SVG示例（如仅包含一个矩形的SVG）测试，结果依旧返回空数组

可能的原因及解决建议 #

1. SVG缺少命名空间声明 #

canvas.toSVG()生成的SVG可能缺失标准SVG命名空间声明，导致解析器无法识别。可以手动为SVG添加命名空间：

// 修改clearCanvas中的state赋值逻辑
state = canvas.toSVG().replace('<svg', '<svg xmlns="http://www.w3.org/2000/svg"');

2. Fabric.js版本兼容性问题 #

不同版本的Fabric.js对SVG解析的处理逻辑存在差异，旧版本可能无法正确解析canvas.toSVG()生成的内容。建议尝试升级到最新稳定版，或降级到已知兼容的版本（如v4.x系列）。

3. SVG内容包含无效/不可见元素 #

canvas.toSVG()生成的SVG可能包含空组（<g>）或完全不可见的元素，Fabric.js解析时会自动过滤这些无效元素。可以将state打印出来，检查其中的图形元素是否有实际绘制内容（如width/height不为0、opacity不为0等）。

4. 尝试使用Promise版本的解析方法 #

Fabric.js v3及以上版本支持Promise风格的loadSVGFromString，可以换用异步/await写法，避免回调可能的隐性问题：

async function restoreCanvas() {
  if (!state) return;
  try {
    const [objects, options] = await fabric.loadSVGFromString(state);
    console.log(objects);
    // canvas.clear();
    // canvas.add(...objects);
    // canvas.renderAll();
  } catch (error) {
    console.error("Error loading SVG:", error);
  }
}

5. 移除Fabric自定义属性 #

canvas.toSVG()可能会生成Fabric.js专属的自定义属性（如fabric:*前缀的属性），部分属性可能导致解析失败。可以尝试移除这些自定义属性后再测试：

// 移除SVG中的Fabric自定义属性
state = state.replace(/fabric:[^="]+="[^"]+"\s?/g, '');

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