Fabric.js: loadFromDatalessJSON: load multiple svg file as object from saved design error

[SanjayChaudhary02]

@kangax While i am trying to load dataless json from saved design , which contain multipath svg files as object it returns error on:fabric.require.js:441:
objects.forEach(function(o, index) {

while i am saving datalessjson by adding obj.sourcePath = obj.origingSVG(oringinal path of svg),
Multipath svg file contain objects key in objects data so after first iteration value of objects replace by url and foreach stop.

• issue only comes while i am loading multipath svg
  Load svg method:

• Initially while we add svg from url to canvas
  ` fabric.loadSVGFromURL(src, function(objects, options) {

       var img = fabric.util.groupSVGElements(objects, options);
       img.set('sourcePath', src);
                          current.options.currentCanvas.add(img).renderAll();
                            img.set({
                                left: 0,
                                top: 0,
                                objID: newID,
                                objType : targetArea,
                                uploadBaseType: 'svg',
                                origingSVG: src,
                                originX:'center',
                                originY:'center',
                                selectable: false,
                                scaleX : current.options.canvasWidth / img.width, 
                                scaleY : current.options.canvasHeight / img.height, 
                                applyFill: 0,
                            });
                          current.options.currentObject.center();
                          current.options.currentObject.setCoords();
                          current.options.currentCanvas.renderAll();
                          current.options.currentCanvas.setActiveObject(current.options.currentObject);
                        },null,true);`
  

Output ::
Datalessjson:
"{"version":"2.0.0-rc.3","objects":[{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":265.05,"top":176.7,"width":1200,"height":800,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.44,"scaleY":0.44,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82359779","objType":"background","uploadBaseType":"svg","**objects**":"design-tool/images/backgrounds/201211111150511352699451800566751.svg"},{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":379.34,"top":161.97,"width":4544,"height":4056,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.06,"scaleY":0.04,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82380412","objType":"shape","uploadBaseType":"svg","objects":"images/ICON-01-01.svg"},{"type":"group","version":"2.0.0-rc.3","originX":"center","originY":"center","left":62.01,"top":240.29,"width":151,"height":151,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":0,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":0.38,"scaleY":0.44,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82386178","objType":"shape","uploadBaseType":"svg","objects":"images/25.svg"},{"type":"path","version":"2.0.0-rc.3","originX":"center","originY":"center","left":260.0490566037736,"top":105.44999999999999,"width":98.13,"height":114.04,"fill":"#00274D","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":0.67,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"evenodd","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82393032","objType":"shape","uploadBaseType":"svg","sourcePath":"images/36.svg"},{"type":"path","version":"2.0.0-rc.3","originX":"center","originY":"center","left":250.04716981132074,"top":254.6,"width":247.13,"height":233.23,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":0.67,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"evenodd","paintFirst":"fill","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"lockScalingX":false,"lockScalingY":false,"objID":"82395514","objType":"shape","uploadBaseType":"svg","sourcePath":"images/58.svg"}],"background":{}}"

Loaded from saved design:
canvas.loadFromDatalessJSON(output, canvas.bind(canvas), function(o, object) {});

Version

2.0

Test Case

http://jsfiddle.net/srchaudharys02/Da7SP/824/

Steps to reproduce

Expected Behavior

Actual Behavior

[asturur]

Can you provide a fiddle that load an svg , output it and is not able to load it back?

[SanjayChaudhary02]

I have created fiddle with example:
http://jsfiddle.net/srchaudharys02/Da7SP/824/

I have fixed with change in fabricjs method , but will be better if you suggest a way.
If you want then i will share my fix.
Thanks.

[asturur]

ok look like a bug, now is clear. I ll look into it.
Yes, you should show how you fixed it.

[SanjayChaudhary02]

I have changed fabric.js.

`fabric.Group.fromObject = function(object, callback) {

if (typeof object.objects === 'string') {
  var pathUrl = object.objects; // object.objects contain url of svg object
  object.sourcePath = pathUrl;
  var options = fabric.util.object.clone(object, true);
  fabric.loadSVGFromURL(pathUrl, function (objects, options) {
    //if fill of object changed in design
    if(object.fill!='rgb(0,0,0)'){
      $j.each(objects, function (index, value) {
          value.set({'fill':object.fill});
      });
    }        //opacity of object is changed in design
  if(object.opacity!='1'){
      $j.each(objects, function (index, value) {
          value.set({'opacity':value.opacity*object.opacity});
      });
    }

    var path = fabric.util.groupSVGElements(objects, options);
    path.setOptions(object);
    callback && callback(path);
  });
}else{
  fabric.util.enlivenObjects(object.objects, function(enlivenedObjects) {
    var options = fabric.util.object.clone(object, true);
    delete options.objects;
    callback && callback(new fabric.Group(enlivenedObjects, options, true));
  });
}

};`

If you can't got solution with these change than request i will share my full source code, i have changed code at other places for my other requirement so i don't want you to destruct, but ya i have working library code which are loading datalessjson properly.

once again i am very thankful for your library.

[thomasaull]

Running into the same problem with 2.2.2 – any updates on this?

[SanjayChaudhary02]

Please read comments i have already placed solution.

[thomasaull]

I'd rather have this bugfix included in the library than changing the fabric js core (and overwriting it with the next update). But thanks @SanjayChaudhary02 :)

[brentcappello]

@asturur @thomasaull If you could take a look at #4994 and see if that implementation resolves your issue and works for fabric as a whole. Thanks!

[ristarr11]

Running into the same problem with 2.4.2 – any updates on this?

[asturur]

i forgot about this, too many issues. :(

[ristarr11]

Thank you for the answer!
Amazing library nevertheless! :)

[asturur]

i have a fix.