使用fabric.loadSVGFromString 将 SVG 内容加载到 Fabric.js 时出现问题

Question

我在使用 Fabric.loadSVGFromString 方法将 SVG 内容加载到 Fabric.js 时遇到问题。尽管有一个有效的 SVG 字符串，回调中加载的对象数组似乎是空的。

代码：

let state;

// Function to clear the canvas and store its state as an SVG string
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");
  }
}

// Function to restore the canvas state from the stored SVG string
function restoreCanvas() {
  if (state) {
    fabric.loadSVGFromString(state, (objects, options, error) => {
      if (error) {
        console.error("Error loading SVG:", error);
      } else {
        // Here i supposed to get objects instead getting empty array
        console.log(objects);
        //canvas.clear();
        //canvas.add(...objects);
        //canvas.renderAll();
      }
    });
  }
}

其他详细信息：

clearCanvas 函数清除画布并将其状态存储为 SVG 字符串（状态）。 RestoreCanvas 函数尝试使用fabric.loadSVGFromString 方法将对象加载回画布。加载的对象被记录到控制台，但数组似乎是空的。

采取的故障排除步骤：

在调用fabric.loadSVGFromString 之前检查状态变量是否包含有效的SVG 字符串。 确保在加载过程中控制台中没有记录任何错误。 将 SVG 内容简化为测试的基本示例。

请求帮助： 寻求有关尽管具有有效的 SVG 字符串但对象数组为何为空的指导。任何解决问题的见解或建议将不胜感激。

Answer 1

我不知道为什么它返回空数组，但我尝试了另一种方法，它可以工作，而不是转换为 SVG，我只是转换为 json，然后在恢复中我刚刚解析，它工作得很好：

//Store
state = JSON.stringify(canvas.toObject());

//Parse
const obj = JSON.parse(state);