I am trying to import multiple svg file and after modification saving the json to database. I have tried to use

    canvas.item(0).sourcePath = '/URL/FILE.svg';
    JSON.stringify(canvas.toDatalessJSON());

but this won't work for multiple files, it works for the first file only. i am trying to specify every single file url but can't understand how this can be done. any solution please?

thanks in advance

I am trying to import multiple svg file and after modification saving the json to database. I have tried to use

    canvas.item(0).sourcePath = '/URL/FILE.svg';
    JSON.stringify(canvas.toDatalessJSON());

but this won't work for multiple files, it works for the first file only. i am trying to specify every single file url but can't understand how this can be done. any solution please?

thanks in advance

• javascript
• json
• html
• canvas
• fabricjs

1 Answer 1

canvas.item(0) - gets the first object. canvas.item(1) - gets the second object and so on....

If you don't know the total amount of objects you can use the canvas.forEachObject option.

     canvas.forEachObject(function(obj){
        obj.sourcePath = '/URL/FILE.svg';
        console.log(obj.sourcePath)
     });

     JSON.stringify(canvas.toDatalessJSON());

You could also set obj.sourcePath when you load the svg like this.

    fabric.loadSVGFromString(svg, function(objects, options) {
      var obj = fabric.util.groupSVGElements(objects, options);
      obj.sourcePath = '/URL/FILE.svg';
      canvas.add(obj);
      canvas.renderAll();
    });

Hope that helps!