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

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

我刚刚遇到了同样的问题，在看到你的帖子后，我决定自己再深入一点。这是由于loadSVGFromURL中onComplete回调中的作用域问题造成的。问题源于没有将url隔离到单个作用域；进行多个背靠背调用会导致在onComplete激发时始终使用最后一个url。作为一种解决方法，您可以链接SVG加载，也可以自己发出ajax请求，然后使用loadSVGFromString加载

我在学习fabric似乎充满了这些bug，呃，gotchas：(

编辑

---

我说得太快了，loadSVGFromString也有同样的缺点，它不能异步工作。虽然如此，链接是最明显的解决办法。

我只是遇到了同样的问题，在看到你的帖子后，我决定自己再深入一点。这是由于l中onComplete回调的范围问题oadSVGFromURL。问题源于没有将url隔离到单个作用域；进行多个背对背调用会导致在onComplete激发时始终使用最后一个url。作为一种解决方法，您可以链接SVG加载，也可以自己发出ajax请求，然后改为使用loadSVGFromString加载

我在学习fabric似乎充满了这些bug，呃，gotchas：(

编辑

---

我说得太快了，loadSVGFromString也有同样的缺点，它不能异步工作。虽然如此，链接是最明显的解决办法。

我只是遇到了同样的问题，在看到你的帖子后，我决定自己再深入一点。这是由于l中onComplete回调的范围问题oadSVGFromURL。问题源于没有将url隔离到单个作用域；进行多个背对背调用会导致在onComplete激发时始终使用最后一个url。作为一种解决方法，您可以链接SVG加载，也可以自己发出ajax请求，然后改为使用loadSVGFromString加载

我在学习fabric似乎充满了这些bug，呃，gotchas：(

编辑

---

我说得太快了，loadSVGFromString也有同样的缺点，它不能异步工作。虽然如此，链接是最明显的解决办法。

我只是遇到了同样的问题，在看到你的帖子后，我决定自己再深入一点。这是由于l中onComplete回调的范围问题oadSVGFromURL。问题源于没有将url隔离到单个作用域；进行多个背对背调用会导致在onComplete激发时始终使用最后一个url。作为一种解决方法，您可以链接SVG加载，也可以自己发出ajax请求，然后改为使用loadSVGFromString加载

我在学习fabric似乎充满了这些bug，呃，gotchas：(

编辑

---

我说得太早了，loadSVGFromString也有同样的缺点，它不能异步工作。虽然如此，链接是最明显的解决办法。

我实际上也这样做，用户可以选择任意数量的SVG文件来加载，然后再回来编辑他们的工作。当他们回来时，我在尝试重新加载多个文件。在我的例子中，我实际上是在构建一个包含svg url和其他有用信息的对象数组。这允许我将它们加载到堆栈中（最适合我的加载顺序，不过您可以轻松地使用队列实现），然后一次弹出一个

var loadingLayerStack = [url1, url2, url3];

function ProcessLayerLoading()
{
    var layerUrl = loadingLayerStack.pop();
    DrawSvgToCanvas(layerUrl);
}

function DrawSvgToCanvas(url)
{
    fabric.loadSVGFromURL(url, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);


        // ...any code for special handling of the loaded object


        // put object on the canvas
        canvas.add(obj);

        // get the next image
        ProcessLayerLoading();
    });
}

值得注意的是，我有一个设置，可以在添加对象时启用渲染。因此canvas.add调用也可以为我处理初始渲染

---

希望这对你有所帮助。：）

我实际上也这样做，用户可以选择任意数量的SVG文件来加载，然后回来编辑他们的工作。当他们回来时，我在尝试重新加载多个文件时遇到了同样的问题。在我的例子中，我实际上是在构建一个包含SVG url和其他有用信息的对象数组。这我们让我把它们加载到一个堆栈中（最适合我的加载顺序，不过你可以很容易地用一个队列来实现），然后一次只弹出一个

var loadingLayerStack = [url1, url2, url3];

function ProcessLayerLoading()
{
    var layerUrl = loadingLayerStack.pop();
    DrawSvgToCanvas(layerUrl);
}

function DrawSvgToCanvas(url)
{
    fabric.loadSVGFromURL(url, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);


        // ...any code for special handling of the loaded object


        // put object on the canvas
        canvas.add(obj);

        // get the next image
        ProcessLayerLoading();
    });
}

值得注意的是，我有一个设置，可以在添加对象时启用渲染。因此canvas.add调用也可以为我处理初始渲染

---

希望这对你有所帮助。：）

我实际上也这样做，用户可以选择任意数量的SVG文件来加载，然后回来编辑他们的工作。当他们回来时，我在尝试重新加载多个文件时遇到了同样的问题。在我的例子中，我实际上是在构建一个包含SVG url和其他有用信息的对象数组。这我们让我把它们加载到一个堆栈中（最适合我的加载顺序，不过你可以很容易地用一个队列来实现），然后一次只弹出一个

var loadingLayerStack = [url1, url2, url3];

function ProcessLayerLoading()
{
    var layerUrl = loadingLayerStack.pop();
    DrawSvgToCanvas(layerUrl);
}

function DrawSvgToCanvas(url)
{
    fabric.loadSVGFromURL(url, function(objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);


        // ...any code for special handling of the loaded object


        // put object on the canvas
        canvas.add(obj);

        // get the next image
        ProcessLayerLoading();
    });
}

值得注意的是，我有