没有大纲的 Fabric.js svg 未加载答案

【问题标题】：Fabric.js svg without outline not loading没有大纲的 Fabric.js svg 未加载
【发布时间】：2019-02-07 08:31:05
【问题描述】：

我在使用 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（导入适用于fabric 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);
    });
}();

【问题讨论】：

标签： javascript svg fabricjs

【解决方案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);
    });
}();

【讨论】：