fabricjs：v2.2.1 如果 SVG 上只存在一条路径，则 SVG 路径存储在 fabric 对象上的何处

Question

我正在将我的应用程序中的 fabricjs 从版本 1.7.22 升级到 2.2.1。

我主要处理在 Illustrator 中创建的 SVG 对象。然后在应用程序中，我在 SVG 对象中操作路径。

在 v1.7.22 中，每个对象的 svg 路径将在 'paths' 属性下...

现在使用 2.2.1，我看到 'paths' 不见了，有一个“_objects”属性。

这一切都很好。

我的问题是“_objects”属性只有在 SVG 对象上有超过 1 个路径时才存在，否则，我看不到 SVG 路径存储在哪里。

所以如果是这样...

...然后“_objects”属性存在。但是如果是这样的话...

..然后没有'_objects' 属性.

那么如果有一个只有一个路径的 SVG 对象，那么该路径存储在 fabric 对象中的哪里？

Answer 1

正如文档groupSVGElements中提到的，它returns一个fabric.Object（如果svg包含一个路径）/ fabric.Group（如果svg包含多个路径).

并在 change log fabric.PathGroup 中声明已被删除。

如果它包含多个路径，则创建一个包含所有 Path objects 的 fabric.Group 对象，否则 returns 仅包含路径对象。

要获取路径，请使用 object.path。

演示版

var canvas = new fabric.Canvas('c');
var svg = '<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  viewBox="0 0 375 200" enable-background="new 0 0 400.5 477" xml:space="preserve"> <path d="M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0"/><path d="M250 0 L175 200 L325 200 Z" /> </svg>';

fabric.loadSVGFromString(svg, function(objects, options) {
  var shape = fabric.util.groupSVGElements(objects, options);
  console.log(shape.type)
  if(shape.type == 'group'){
   shape.forEachObject(function(obj){
    console.log(obj.path)
   })
  }
  else if(shape.type == 'path'){
    console.log(shape.path)
  }
  
  canvas.add(shape);
  document.getElementById('label').innerHTML = "Object is " + shape.type ;

});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<label id="label"></label>
<canvas id="c" height=300 width=400 style="border:1px solid #ccc"></canvas>

fabricjs：v2.2.1 如果 SVG 上只存在一条路径，则 SVG 路径存储在 fabric 对象上的何处

fabricjs: v2.2.1 Where are SVG paths stored on fabric object if only a single path exists on SVG

svg

fabricjs

fabricjs2