javascript - Fabric.js 从 SVG 元素创建图像失败

Question

Fabric docs建议可以使用fabric.Image.fromElement(element, optionsopt,callback) → {fabric.Image}

从SVG元素创建图像

在尝试测试它时，我似乎遇到了 TypeError: t.getAttribute is not a function。

知道我可能做错了什么吗？这个方法可能不符合我的想法吗？

代码示例:

fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg')
  .then((response) => response.text())
  .then((svg) => {
    fabric.Image.fromElement(svg, (image) => {
      console.log('image: ', image);
    });
  })
  .catch(function(error) {
    console.log(error);
  });

用笔: https://codepen.io/sheepgobeep/pen/GwNOeE

Answer 1

FromElement 不是公共(public)方法。这还不清楚，我会修复文档。

FromElement 从 svg 解析器中调用，但您可以仅在整个 SVG 上使用它，然后可以丢弃不需要的内容。

对于 Tiger.svg，您会得到一堆形状和线条，如果不分组处理，这些形状和线条就没有意义。

您可以使用

fabric.loadSVGFromString: function(string, callback, reviver, options)

以及回调内部:

callback(objects, options) {
  var group =  fabric.groupSVGElements(objects, options);
}

或者您可以像其他答案中建议的那样使用 fromImage 。不同之处在于，图像就像 jpeg，在缩放时可以更好地缩放，而组的渲染速度较慢，但​​可以让您访问 SVG 的每个部分(如果您不需要更改任何内容，则这可能是无用的)