使用未分组的 Fabric JS 加载 SVG答案

【问题标题】：Loading SVG using Fabric JS ungrouped使用未分组的 Fabric JS 加载 SVG
【发布时间】：2015-01-21 19:56:20
【问题描述】：

谁能告诉我如何使用未分组的织物 js 加载 SVG 文件。使用以下代码加载 SVG 文件，但它显示为单个对象。

<html>
<head>
    <script src="fabric.min.js"></script>
    <script src="jquery.min.js"></script>
    <script>
        $(function (){

            var canvas = this.__canvas = new fabric.Canvas('c');
            fabric.Object.prototype.transparentCorners = true;
            fabric.loadSVGFromURL("xxx.svg", function (objects, options) {
                var group = fabric.util.groupSVGElements(objects, options);
                canvas.add(group);
                canvas.renderAll();
            });
        });
    </script>
</head>
<body>
<canvas id="c" width="800px" height="600px"></canvas>
</body>
</html>

PS：我尝试将对象一个接一个（使用循环）添加到画布，但没有奏效。我也试过这个：Load SVG from file to canvas and ungroup it

【问题讨论】：

标签： javascript svg fabricjs

【解决方案1】：

这是我为当前正在处理的项目所做的，以加载未分组的 svg 文件。

var canvas = new fabric.Canvas('myCanvas');

fabric.loadSVGFromURL('svgfile.svg', function (objects) {
     canvas.add.apply(canvas, objects);
     canvas.renderAll();
});

现在你可以这样做来选择一个对象。

canvas.on('object:selected', function (e) {
      var activeObject = e.target;
      activeObject.setFill('purple');
});

【讨论】：

【解决方案2】：

不要使用var group = fabric.util.groupSVGElements(objects, options);，而是可以循环使用objects，然后在画布上一一添加。

【讨论】：