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

虽然这在 fabric.js 文档中并不明显，但如果您想从 SVG URL 创建图像，您实际上应该使用 fabric.Image.fromURL()。试试这个：

const canvas = new fabric.Canvas("c")

const callback = (image) => {
  canvas.add(image).renderAll()
}

fabric.Image.fromURL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg', callback, {
  width: 900,
  height: 900,
  scaleX: 0.2,
  scaleY: 0.2
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id='c' width="500" height="400"></canvas>

此外，请注意，您在查看更新版本的文档 (v2+) 时使用的是旧版本的库 (1.7.22)

Answer 2

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

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

在 tiger.svg 的情况下，您会得到一堆形状和线条，如果不在组中处理，这些形状和线条将毫无意义。

您可以使用

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

在回调中：

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

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

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

Fabric.js creating image from SVG element failure

javascript

svg

fabricjs