Fabric docs建议可以使用fabric.Image.fromElement(element, optionsopt,callback) → {fabric.Image}
在尝试测试它时,我似乎遇到了 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);
});
最佳答案
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 的每个部分(如果您不需要更改任何内容,则这可能是无用的)
关于javascript - Fabric.js 从 SVG 元素创建图像失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53266738/