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

Question

总的来说，我有一个矩形SVG图像分成两半，我想在点击时添加一个图像，但是，当我导入SVG时，它只创建一个PathGroup而不是两个 - 有人知道我怎么能实现两个不同的PathGroups？我相信这是实现我总体目标的第一步。

以下是我加载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>

提前感谢，因为我一直坚持这个问题。

Answer 1

您可以通过将每个元素传递到canvas.add方法：

，从而无需分组来添加SVG中的对象

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

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

在Fabric.js网站上有一个demo，您可以在Load SVG标签中找到该部分，“不加分组加载”按钮