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提供了一个kitchennsink演示，你可以尝试代码。
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(); });
我实际上也这样做，用户可以选择任意数量的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调用也会为我处理初始渲染。
希望这能以某种方式帮助你。 🙂
我刚遇到同样的问题，在看到你的post之后，我决定自己深入挖掘它。 事实certificate，这是由于loadSVGFromURL中的onComplete回调中的范围问题。 问题源于不将url隔离到单个范围; 进行多次背靠背调用会导致在onComplete触发时始终使用最后一个url。 作为一种解决方法，您可以链接SVG加载，也可以自己创建ajax请求，然后使用loadSVGFromString加载它。
我正在学习面料似乎充满了这些错误，错误，陷阱:(
编辑
我说得太早了，loadSVGFromString遭受同样的弱点，它不能异步工作。 据说链接是最明显的解决方法。
fabric.loadSVGFromURL（）通过XmlHttpRequest获取SVG。 如果您等待每个请求完成，则可以加载多个。 这意味着您需要一个用于在JavaScript中制作和编写异步promise的工具。 退房q。 https://github.com/kriskowal/q