javascript - Fabric.js loadSVGFromUrl 不显示多个导入的 SVGS

Question

我正在使用fabric.js 并将许多SVG 文件加载到其中。使用此代码显示这些导入的文件之一没有问题；

fabric.loadSVGFromURL('ico-svg/drink.svg', function(objects, options) {
    var drink = fabric.util.groupSVGElements(objects, options);
    drink.set({left: 80, 
        top: 175, 
        width: 32, 
        height: 32 });
    canvas.add(drink); 
    canvas.calcOffset();
    canvas.renderAll();
}); 

但是，当我重复这段代码时，页面只显示两个 SVG 之一，并且它们实际上在页面刷新时发生变化 - 只有一个图标会显示一次，一个图标会显示另一个图标，在奇怪的情况下它们会两者均显示，但其中一个 SVG 无法完全显示。

要加载其他 SVG，我只需复制上面的代码并更改所需的变量即可；

fabric.loadSVGFromURL('exporttest.svg', function(objects, options) { 
    var dollars = fabric.util.groupSVGElements(objects, options);
    dollars.set({left: 80, 
        top: 90, 
        width: 350, 
        height: 342 });
    canvas.add(dollars); 
    canvas.calcOffset();
    canvas.renderAll();
}); 
fabric.loadSVGFromURL('ico-svg/drink.svg', function(objects, options) { 
    var drink = fabric.util.groupSVGElements(objects, options);
    drink.set({left: 80, 
        top: 175, 
        width: 32, 
        height: 32 });
    canvas.add(drink); 
    canvas.calcOffset();
    canvas.renderAll();
}); 

这是我做错了什么吗？我读到，从 URL 加载 SVG 的库支持并不是那么出色 - 是这样吗？理想情况下，以这种方式或类似的方式从 URL 加载 SVG 是我的最佳选择，因为有很多，而且它们都非常复杂并且需要不同的定位。

Answer 1

我认为这是库中已修复的错误。目前，fabricjs.com 提供 kitchensink 演示，您可以在其中尝试代码。

http://fabricjs.com/kitchensink/

将下面的代码复制粘贴到执行选项卡中以加载 3 个 svg 在一起，没有任何奇怪的问题或采取任何预防措施。

// clear canvas
canvas.clear();

// remove currently selected object
canvas.remove(canvas.getActiveObject());

fabric.loadSVGFromURL('../assets/1.svg', function(objects, options) { 
    var dollars = fabric.util.groupSVGElements(objects, options);
    canvas.add(dollars); 
    canvas.calcOffset();
    canvas.renderAll();
}); 
fabric.loadSVGFromURL('../assets/2.svg', function(objects, options) { 
    var drink = fabric.util.groupSVGElements(objects, options);
    canvas.add(drink); 
    canvas.calcOffset();
    canvas.renderAll();
});
fabric.loadSVGFromURL('../assets/3.svg', function(objects, options) { 
    var drink = fabric.util.groupSVGElements(objects, options);

    canvas.add(drink); 
    canvas.calcOffset();
    canvas.renderAll();
});