在fabric js的canvas中外部加载svg

Question

我想将 svg 中的所有元素单独上传到我的画布中。

您可以在控制台中看到[控制台截图(https://i.sstatic.net/Yj3SGXEx.png)，svg文件路径是正确的，并且控制台正确记录了内容。

这是我将 svg 上传到画布的代码

// URL of the external SVG file
const svgUrl = '../111.svg'; // Replace with your SVG URL

// Load the SVG file
fabric.loadSVGFromURL(svgUrl, (objects, options) => {
    console.log('SVG loaded:', objects);

    // Add objects to the canvas
    if (Array.isArray(objects)) {
        objects.forEach(obj => {
            canvas.add(obj);
        });
    } else {
        canvas.add(objects);
    }

    // Render the canvas
    canvas.renderAll();
}, (error) => {
    console.error('Error loading SVG:', error);
});

Answer 1

 var site_url = "./sample.svg"; // in public folder
fabric.loadSVGFromURL(site_url).then((o) => {
  o?.objects.forEach((element) => {
    canvas.add(element);
  });
});
canvas.renderAll();