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

Question

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

这是我加载 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();
}

有一个demo在 Fabric.js 网站上，您可以在“加载 SVG”选项卡的“加载而不分组”按钮中找到该部分