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

我正在使用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是我最好的选择，因为有这么多，而且它们都很复杂并且需要不同的位置。

最佳答案

我认为这是库中已修复的错误。
当前的fabricjs.com提供了一个厨具演示，您可以在其中试用代码。

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

关于javascript - Fabric.js loadSVGFromUrl不显示多个导入的SVGS，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21499023/