Html5 canvas 为什么FabricJS上的fabric.Path显示与svg文件不同？

我想在Fabric.JS中的svg文件中显示路径：

<g>
  <path style="fill:none;stroke:#000000;stroke-miterlimit:10;" 
    d="M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72"/>
</g>

但结果不一样：

预期： FabricJS中的路径显示与SVG文件中相同。

这是我的密码：

var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.height（$（“#canvasContainer”）.height（）； var canvas=new fabric.canvas（'editorCanvas'{ 背景颜色：“白色”， 选择线宽：2， 宽度：$（“#画布容器”）.width（）， 高度：$（“#画布容器”）。高度（） }); var Path_0_1=新结构路径（'M221.58-0.55 c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72'{ //填写：'无'， 笔划：'#000000'， strokeMiterLimit:10， 不透明度：1， }); canvas.add（路径0\u 1）； canvas.moveTo（路径0,1）； setObjectCoords（）； canvas.renderAll（）； 函数setObjectCoords（）{ canvas.forEachObject（函数（对象）{ setCoords（）； }); }

#画布容器{
宽度：100%；
高度：100vh；
背景颜色：灰色；
}

---

设置

fill

值

''null | | | |'透明'

，因此

ctx.fill（）

它不会向对象填充任何内容

演示

var canvasObject=document.getElementById（“editorCanvas”）； //将画布设置为与div相等的大小 $（canvasObject）.width（$（“#canvasContainer”）.width（）； $（canvasObject）.height（$（“#canvasContainer”）.height（）； var canvas=new fabric.canvas（'editorCanvas'{ 选择线宽：2， 宽度：$（“#画布容器”）.width（）， 高度：$（“#画布容器”）。高度（） }); var Path_0_1=新结构路径（'M221.58-0.55c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72'{ 填充：空， 笔划：'#000000'， }); canvas.add（路径0\u 1）

#画布容器{
宽度：100%；
高度：100vh；
}

请记住，如果您有SVG元素的句柄，您可以使用fabric.Path.fromElement（svgNode）来获得具有正确选项的路径。@AndreaBogazzi，谢谢您的推荐，在某些情况下这是一个很好的方法

var Path_0_1 = new fabric.Path('M221.58-0.55   c17.5,31.22,4.77,57.16-8.14,88.46c-13.75,33.35,0.71,57.72,0.71,57.72', {
  fill: 'none',
  stroke: '#000000',
  strokeMiterLimit: 10,
  opacity: 1,
});