Fabric.js中的SVG显示/渲染问题

时间:2012-05-06 12:32:01

标签: svg fabricjs

我正在使用FabricJS,我在画布上遇到SVG显示问题:

  • 结果显示在fabricJS的选择框之外(由于翻译?)
  • 选择的锚点在转换后消失,然后无法找回它们。

以下是截图: enter image description here

我正在使用Potrace的输出SVG,我认为这是我问题的根源。
以下是SVG的代码:SVG code in pastebin
您可以在此页面上使用FabricJS进行测试:FabricJS Kitchensing example 只需将SVG的代码粘贴到“加载SVG”区域,然后调整大小并旋转剖面框以显示SVG。

您是否知道我的SVG代码部分或fabricjS代码导致问题的部分? 如果是这样,我可以自己轻松更改吗?如果没有,是否有可能纠正或找出可能的错误?

非常感谢你的帮助。

编辑:貌似,FabricJS不喜欢SVG的这一行:

<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">

更特别是翻译和缩放属性......如何解决?

EDIT2:解决方案是,translate和scale分别等于(0,0)和(1,1),或者更好的是,它们应用于坐标。

有人有想法用Potrace或JS脚本做到这一点吗?

1 个答案:

答案 0 :(得分:4)

2年后,fabricJs现在能够完全解析和管理这个SVG。 只需将旧的pasteBin SVG代码粘贴到kitchenSink演示中,您就会看到它加载正常。

最近在SVG解析区域发生了很多改进。 我知道这不是stackoverflow用户所期望的答案,但更好的是要知道这可能仍然是一个问题。