ファブリックjsはインポートされたsvgにIDを割り当てます

Question

異なる時刻に別のものがロードされるため、順序が常に同じではないため、自分のsvgにIDを割り当てようとしています。だから、最初の2つのIDが何らかの理由で自動的に行われ

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(); 
    }); 
}; 

（テキストエリア-maxとtextareaの分が、最後はわずか1です）。それらは同じように私によって同時に作成されました。それはちょっと変わったようです。どんなアイデアもこの時点で助けになるでしょう。

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は、匿名関数を使用していますので、値は期待どおりに設定されません。別の関数を作成し、iの値を正確に取得し、svgUidをobjに設定してgroupSVGElementsに設定し、キャンバスに追加すると、そのスコープ内のiの値が渡されます。

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(); 
    }); 
}