Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Fabric.js从SVG元素创建图像失败_Javascript_Svg_Fabricjs - Fatal编程技术网

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

Javascript Fabric.js从SVG元素创建图像失败,javascript,svg,fabricjs,Javascript,Svg,Fabricjs,Fabric建议可以使用Fabric.image.fromElement(元素,选项选项,回调)从SVG元素创建图像→ {fabric.Image} 在尝试测试时,我似乎遇到了TypeError:t.getAttribute不是一个函数 知道我做错了什么吗?这个方法可能不会像我想的那样吗 代码示例: fetch('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg') .then((response) => res

Fabric建议可以使用
Fabric.image.fromElement(元素,选项选项,回调)从SVG元素创建图像→ {fabric.Image}

在尝试测试时,我似乎遇到了
TypeError:t.getAttribute不是一个函数

知道我做错了什么吗?这个方法可能不会像我想的那样吗

代码示例:

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);
  });
在笔中:

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

const canvas=newfabric.canvas(“c”)
常量回调=(图像)=>{
canvas.add(image.renderAll())
}
fabric.Image.fromURL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg,回调{
宽度:900,
身高:900,
scaleX:0.2,
斯卡利:0.2
});

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

const canvas=newfabric.canvas(“c”)
常量回调=(图像)=>{
canvas.add(image.renderAll())
}
fabric.Image.fromURL('https://s3-us-west-2.amazonaws.com/s.cdpn.io/106114/tiger.svg,回调{
宽度:900,
身高:900,
scaleX:0.2,
斯卡利:0.2
});

FromElement不是公共方法。 这还不清楚,我会修改文件的

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

在tiger.svg的例子中,如果不在一个组中处理,就会得到一堆没有意义的形状和线条

你可以用

fabric.loadSVGFromString: function(string, callback, reviver, options)
在回调中:

callback(objects, options) {
  var group =  fabric.groupSVGElements(objects, options);
}
或者你也可以像另一个答案中建议的那样使用fromImage。
不同之处在于,图像就像jpeg,缩放时可以更好地缩放,而组渲染速度较慢,但允许您访问SVG的每一部分(如果不需要更改任何内容,这可能是无用的)

FromElement不是公共方法。 这还不清楚,我会修改文件的

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

在tiger.svg的例子中,如果不在一个组中处理,就会得到一堆没有意义的形状和线条

你可以用

fabric.loadSVGFromString: function(string, callback, reviver, options)
在回调中:

callback(objects, options) {
  var group =  fabric.groupSVGElements(objects, options);
}
或者你也可以像另一个答案中建议的那样使用fromImage。
不同之处在于,图像就像jpeg,缩放时可以更好地缩放,而组渲染速度较慢,但可以让您访问SVG的每一部分(如果您不需要更改任何内容,这可能是无用的)

谢谢!我从一个URL加载SVG,所以我的示例是一个任何人都可以运行并看到控制台错误的自包含代码段。从URL加载SVG和图像确实可以按预期工作。我只是好奇
fromElement
方法实际上应该如何工作。我们将查看V1文档,看看是否在V2中修改了
fromElement
。谢谢!我从一个URL加载SVG,所以我的示例是一个任何人都可以运行并看到控制台错误的自包含代码段。从URL加载SVG和图像确实可以按预期工作。我只是好奇
fromElement
方法实际上应该如何工作。我们将查看V1文档,看看是否在V2中修改了
fromElement