使用未分组的 Fabric JS 加载 SVG [英] Loading SVG using Fabric JS ungrouped
本文介绍了使用未分组的 Fabric JS 加载 SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谁能告诉我如何使用未分组的fabric js加载SVG文件.使用以下代码加载 SVG 文件，但它显示为单个对象.
Can anybody tell me how can I load an SVG file using fabric js ungrouped. With the following code the SVG file is loading but it is appeared as a single object.
<html>
<head>
<script src="fabric.min.js"></script>
<script src="jquery.min.js"></script>
<script>
$(function (){
var canvas = this.__canvas = new fabric.Canvas('c');
fabric.Object.prototype.transparentCorners = true;
fabric.loadSVGFromURL("xxx.svg", function (objects, options) {
var group = fabric.util.groupSVGElements(objects, options);
canvas.add(group);
canvas.renderAll();
});
});
</script>
</head>
<body>
<canvas id="c" width="800px" height="600px"></canvas>
</body>
</html>
PS:我尝试将对象一个一个(使用循环)添加到画布，但没有成功.我也试过这个:将 SVG 从文件加载到画布并取消组合
PS: I tried adding the objects one-by-one (using a loop) to the canvas but it was not worked. I also tried this: Load SVG from file to canvas and ungroup it
推荐答案
这是我为当前项目所做的工作，我正在加载未分组的 svg 文件.
This is what I did for a current project I am working on to load a svg file ungrouped.
var canvas = new fabric.Canvas('myCanvas');
fabric.loadSVGFromURL('svgfile.svg', function (objects) {
canvas.add.apply(canvas, objects);
canvas.renderAll();
});
现在你可以像这样选择一个对象.
Now you can do thing like this to select a object.
canvas.on('object:selected', function (e) {
var activeObject = e.target;
activeObject.setFill('purple');
});
这篇关于使用未分组的 Fabric JS 加载 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
