Fabric JS将ID分配给导入的SVG

Question

I'm trying to assign an id to my svgs when i load them because during different times i load different things so the order is not always the same.

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test']

for (var i = 0; i < svgImages.length; i++) {
  fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) {
    objects.svgUid = svgImages[i]; (this was just a test)
    var obj = fabric.util.groupSVGElements(objects, options);
    canvas.add(obj);
    canvas.renderAll();
  });
};

So the first two ids are made automatically for some reason (textarea-max and textarea-min but the last is just 1). They were created at the same time by me in the same way. Just seems odd that it the case. Any ideas would be a help at this point.

Answer 1

var svgImages = ['textarea-max', 'textarea-min', 'cutout-test']

for (var i = 0; i < svgImages.length; i++) {
  (function(i) {
    fabric.loadSVGFromURL("/" + svgImages[i] + ".svg", function(objects, options) {
      var obj = fabric.util.groupSVGElements(objects, options);
      obj.svgUid = svgImages[i];
      canvas.add(obj);
      canvas.calcOffset();
      canvas.renderAll();
    });
  })(i);
};

loadSVGFromURL takes anonymous function there i value will not set as expected. so make another function and pass i value in that scope you can get exact i value and set svgUid to obj created from groupSVGElements then add to canvas.

ES6

const svgImages = ['textarea-max', 'textarea-min', 'cutout-test'];

for (let i = 0; i < svgImages.length; i++) {
  fabric.loadSVGFromURL(`/${svgImages[i]}.svg`, (objects, options) => {
    const obj = fabric.util.groupSVGElements(objects, options);
    obj.svgUid = svgImages[i];
    canvas.add(obj);
    canvas.calcOffset();
    canvas.renderAll();
  });
}