Question

我在用fabric.js 2.3.5版本加载svg文件时遇到问题。似乎没有轮廓就无法导入形状。请参见下面的示例。过去在fabric.js 1.7.22版中可以正常工作，但在2.0.0版或更高版本上无法使用。这是故意的还是问题（错误）？还是我需要修改javascript代码（见下文）？

带轮廓的svg（导入适用于Fabric 2.3.5）

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <g>
    <path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
    <path fill="none" stroke="#ff0000" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" d="M120 80 L120 160 40 160 40 80 120 80"/>
  </g>
</svg>

不带轮廓的svg（导入适用于结构1.7.22，但不适用于2.0.0及更高版本）

<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs/>
  <g>
    <path stroke="none" fill="#808080" d="M120 80 L120 160 40 160 40 80 120 80"/>
  </g>
</svg>

Javascript：

var load_imgs=function() {
    fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
        var obj = fabric.util.groupSVGElements(objects, options);  
        var logo = new fabric.Group(obj.getObjects(), {
            left:20,
            top: 10,
            originX: 'left', 
            originY: 'top'
        });
       logo.scaleToHeight(50);      
       canvas.add(logo);
    });
}();

Answer 1

一段时间后，我偶然发现groupSVGElements不再有效或不再需要。因此正确的工作代码是：

var load_imgs=function() {
    fabric.loadSVGFromURL('mySvg.svg', function (objects, options) {
        var logo = new fabric.Group(objects, {
            left:20,
            top: 10,
            originX: 'left', 
            originY: 'top'
        });
       logo.scaleToHeight(50);      
       canvas.add(logo);
    });
}();

没有轮廓的Fabric.js SVG无法加载

1 个答案: