CODEWITHSUNDEEP
javascriptsvgfabricjs
Harikrishnan
Harikrishnan

Reputation: 3812

Loading SVG using Fabric JS ungrouped

Can anybody tell me how can I load an SVG file using fabric js ungrouped. With the following code the SVG file is loading but it is appeared as a single object.

<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: I tried adding the objects one-by-one (using a loop) to the canvas but it was not worked. I also tried this: Load SVG from file to canvas and ungroup it

Upvotes: 2

Views: 4303

Answers (2)

Jeffrey R
Jeffrey R

Reputation: 31

This is what I did for a current project I am working on to load a svg file ungrouped.

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

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

Now you can do thing like this to select a object.

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

Upvotes: 3

Innodel
Innodel

Reputation: 1426

Don't use var group = fabric.util.groupSVGElements(objects, options); instead you can loop through objects and you can add them one by one on canvas.

Upvotes: 2

Related Questions