在Fabric.js中如何将SVG的所有元素单独导入Canvas？

你的代码目前是直接将加载到的objects数组元素逐个添加，但问题在于Fabric.js加载SVG时，会把SVG里的<g>标签或嵌套结构自动转换为fabric.Group对象——这意味着你添加的可能是“组”而非单个独立元素，看起来没实现“每个元素单独导入”的效果。

要真正拆分SVG里的所有独立元素，需要递归拆解加载结果中的所有Group，把嵌套的子元素提取出来再添加到Canvas：

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

// 递归拆解组，提取所有独立元素
function flattenSVGObjects(objects) {
  let flatElements = [];
  objects.forEach(item => {
    if (item instanceof fabric.Group) {
      // 若是组，递归拆解其子元素并合并到结果数组
      flatElements = flatElements.concat(flattenSVGObjects(item.getObjects()));
    } else {
      flatElements.push(item);
    }
  });
  return flatElements;
}

// 加载并处理SVG
fabric.loadSVGFromURL(svgUrl, (objects, options) => {
    console.log('SVG loaded:', objects);

    // 拆解所有组，得到纯独立元素数组
    const independentElements = flattenSVGObjects(objects);

    // 将每个独立元素单独添加到画布
    independentElements.forEach(element => {
        canvas.add(element);
    });

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

关键说明 #

• 递归函数flattenSVGObjects会遍历所有加载对象，遇到fabric.Group就深入提取子元素，直到所有元素都是非组的独立图形（比如fabric.Rect、fabric.Path等）
• 拆解后每个元素会保留SVG原有的位置、样式等属性，且在Canvas上是独立可选中、可编辑的对象
• 如果你的SVG本身没有嵌套组结构，原代码其实已经生效，但加上这个处理可以兼容所有SVG结构场景

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