Question

结构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不是公共方法。尚不清楚，我将修复文档。

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

对于Tiger.svg，如果不按组处理，则会得到一堆没有意义的形状和线条。

您可以使用

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

并在回调内：

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

或者您也可以像其他答案中所建议的那样使用fromImage。区别在于Image就像是一个jpeg，可以在缩放时更好地缩放，而该组的渲染速度较慢，但是可以访问SVG的每个片段（如果您不需要更改任何内容，则可能没有用）

Answer 2

虽然在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）

Fabric.js从SVG元素故障创建映像

2 个答案: