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

问题描述

我正在使用fabric.js并将大量SVG文件加载到其中.我可以使用此代码显示这些导入的文件之一；

I'm using fabric.js and loading a number of SVG files into it. I have no problem displaying one of these imported files using this code;

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不能完全显示.

However, when I repeat this code, the page only shows one of the two SVGs, and they actually change upon page refresh - only one icon will show one time, one icon will show the other, on the odd occasion they will both show but one of the SVGs won't display completely.

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

To load the other SVG, i'm simply copying the above code and changing the required variables;

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

Is this something i'm doing wrong? I've read that the library support for loading SVGs from URLs isn't that fantastic - could it be that? Ideally, loading the SVGs from an URL this way or in a similar way is my best option as there are so many, and they are each quite complex and require different positioning.

推荐答案

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

I think this was a bug that has been fixed in the library.Current fabricjs.com offer a kitchensink demo where you can try code.

http://fabricjs.com/kitchensink/

将以下代码复制粘贴到执行"选项卡中，以加载3个svg togheter，而不会发生任何奇怪的问题或采取任何预防措施.

copy paste the code below in the execute tab to load 3 svg togheter without any strange issue or taking any precaution.

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

这篇关于Fabric.js loadSVGFromUrl不显示多个导入的SVGS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！