Javascript Fabricjs：如何将导入的SVG图像分解为单独的路径组而不是一个路径组？

总的来说，我有一个分为两半的矩形SVG图像，我想在单击时添加一个图像，但是，当我导入SVG时，它只创建一个路径组而不是两个-有人知道如何实现两个不同的路径组吗？我相信这是实现我总体目标的第一步

下面是我加载SVG的方式：

    fabric.loadSVGFromURL('./img/rect_w_two_halves.svg', function(objects, options){    
        loadedObject = fabric.util.groupSVGElements(objects, options);
        loadedObject.set({
            left:0,
            top:0,
            scaleY:.50,
            scaleX:.50
        });
        canvas.add(loadedObject);
        canvas.renderAll();
    });     

以下是图像的外观：

以下是SVG：

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px"
 height="568px" viewBox="0 0 320 568" enable-background="new 0 0 320 568" xml:space="preserve">
<g id="Layer_2">
    <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" x1="253.978" y1="284" x2="66.022" y2="284"/>
    <path fill="none" stroke="#FFFFFF" stroke-width="15" stroke-miterlimit="10" d="M253.04,448.055
    c0,10.338-8.381,18.719-18.719,18.719H85.68c-10.338,0-18.72-8.381-18.72-18.719V119.945c0-10.338,8.382-18.719,18.72-18.719
    h148.642c10.338,0,18.719,8.381,18.719,18.719V448.055L253.04,448.055z"/>
</g></svg>

---

提前感谢您，因为我一直在讨论这个问题。

您可以通过将每个元素传递到画布中，从SVG添加对象而无需分组。添加方法：

var canvas = new fabric.Canvas('mycanvas');
fabric.loadSVGFromURL(url);

function callback(objects, options) {  
  canvas.add.apply(canvas, objects);
  canvas.renderAll();
}

---

在Fabric.js网站上，您可以在Load SVG选项卡上找到该部分，Load With grouping按钮

，SVG保存为.SVG文件时不会为我呈现。无论如何，为什么不手工制作svg文件并直接使用：关于svg中的链接：谢谢，mb21。根据Fabricjs.com网站路径和路径组部分的说法，这意味着人们希望使用Fabric.loadSVGFromURL加载整个SVG文件，而不是手动创建路径，我认为这可能是我必须采取的方法。因此，基本上，我最终进入Adobe Illustrator并使用Pathfinder进行分割，到目前为止，对形状进行分组似乎是可行的，尽管这并不完全是我想要的。