Question

有人可以告诉我如何使用未经编辑的结构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

Answer 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');
});

Answer 2

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

使用Fabric JS加载SVG加载SVG

2 个答案: