FabricJS 2- Setting fill on SVG paths when only single path

Question

So adding an SVG to the canvas as follows:

// load the svg
fabric.loadSVGFromURL(self.currentDraggedIcon, function(objects, d) {

  var iconGroup = fabric.util.groupSVGElements(objects, d);
  iconGroup.set({
    left: e.layerX,
    top: e.layerY,
    width: d.width,
    height: d.height,
    lockUniScaling: true,
    //  scaleY:self.currentObjectDesigner.scaleFactor,
    // scaleX:self.currentObjectDesigner.scaleFactor,
    dtype: 'UserIcon'
  });

  self.currentObjectDesigner.fabric.add(iconGroup);
  self.currentObjectDesigner.fabric.bringToFront(iconGroup);
  self.currentObjectDesigner.fabric.renderAll();
});

Later on there is a button to say change the paths colour to red inside the group, the code to do this is:

for (var i = 0; i < self.currentObjectDesigner.selectedObject._objects.length; i++) {

  if (self.currentObjectDesigner.selectedObject.item(i).fill == findColor || self.currentObjectDesigner.selectedObject.item(i).fill == findColorAlt) {
    self.currentObjectDesigner.selectedObject.item(i).fill = color;

  }
}

self.currentObjectDesigner.selectedObject.addWithUpdate();

This works perfectly fine if the SVG has multiple paths, but when only a single path exists the _objects property doesn't exist so we are unable to perform the loop and item(i) part to set the fill on the path.

Question is: How do we now set a fill when _objects doesn't exist and the item() method doesn't exist because it's just a single path? - I.e it's not a group.

Durga · Answer 1 · 2018-07-12T12:40:43.447

2

If more than one path present groupSVGElements returns group objects else returns a single object.

DEMO

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

function loadSvg(url, left, top) {
  fabric.loadSVGFromURL(url, function(objects, d) {
    var iconGroup = fabric.util.groupSVGElements(objects, d);
    //for more than one path
    iconGroup.set({
      left: left,
      top: top
    })
    if (iconGroup.type == 'group') {
      //do your logic for group object
      iconGroup.item(0).fill = 'yellow';
      iconGroup.addWithUpdate();
    } else {
      iconGroup.fill = 'red';
    }
    iconGroup.set({
      scaleX: 150 / iconGroup.width,
      scaleY: 150 / iconGroup.height,
    })
    canvas.add(iconGroup);
  }, function() {}, {
    crossOrigin: 'anonymous'
  });

}
loadSvg('https://upload.wikimedia.org/wikipedia/commons/2/22/Wikimapia_logotype.svg', 10, 20);
loadSvg('https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg', 200, 50);

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>

edited Jul 12 '18 at 12:40

answered Jul 11 '18 at 15:35

Durga

15,263
2
28
52

Yes but the single object doesn't work. If i run itemGroup.fill = 'red'; itemGroup.addWithUpdate() - error comes up saying addWithUpdate isn't a function. The object on a single item isn't the same as the ones in the group. – Glen Elkins Jul 12 '18 at 08:51
@GlenElkins `addWithUpdate` is a method for group object. that single item is a regular/normal object, not in group. – Durga Jul 12 '18 at 10:48
Ok, no worries , but it still doesn't work setting itemGroup.fill = 'red' - nothing happens when only a single path! – Glen Elkins Jul 12 '18 at 12:20
@GlenElkins check the demo, added single path svg as well. – Durga Jul 12 '18 at 12:41

FabricJS 2- Setting fill on SVG paths when only single path

1 Answers1