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提供了一个厨房空间演示，您可以尝试使用代码。

http://fabricjs.com/kitchensink/

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

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

Answer 2

我实际上也这样做，用户可以选择任意数量的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调用也会为我完成初始渲染。

希望这能以某种方式帮助你。：）

Answer 3

我刚遇到同样的问题，在看到你的帖子之后我决定再深入挖掘一下这个问题了。事实证明，这是由于loadSVGFromURL中的onComplete回调中的范围问题。问题源于不将网址隔离到单个范围;进行多次背靠背调用会导致在onComplete触发时始终使用最后一个url。作为一种解决方法，您可以链接SVG加载，也可以自己创建ajax请求，然后使用loadSVGFromString加载它。

我正在学习布料似乎充满了这些错误，错误，陷阱:(

修改

我说得太早，loadSVGFromString遭受同样的弱点，它不能异步工作。据说链接是最明显的解决方法。

Answer 4

fabric.loadSVGFromURL（）通过XmlHttpRequest获取SVG。如果等待每个请求完成，则可以加载多个。这意味着您需要一个用于在JavaScript中制作和编写异步promise的工具。退房q。 https://github.com/kriskowal/q

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

4 个答案: