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

【问题标题】：Issue with SVG display / rendering in Fabric.jsFabric.js 中的 SVG 显示/渲染问题
【发布时间】：2012-05-15 06:39:59
【问题描述】：

我正在使用 FabricJS，但在画布中显示 SVG 时遇到问题：

结果显示在fabricJS的选择框外（由于翻译？）
选择的锚点在转换后会消失，然后就不可能再找到它们了。

这是一个截图：

我正在使用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">

尤其是 translate 和 scale 属性……如何解决？

EDIT2： 解决方案是平移和比例分别等于 (0,0) 和 (1,1)，或者更好的是，它们应用于坐标。

有人想用 Potrace 或 JS 脚本来做这件事吗？

【问题讨论】：

感谢 Peter Collingridge SVG 优化器，我找到了解决方案：petercollingridge.appspot.com 它应用了 SVG 文件的所有 g 变换！
如果你找到了解决方案，你可以把它变成一个自我回答的问题。
@Zorkzyd，请提供答案，我也面临与您相同的问题....我可以帮忙解决这个问题吗？
嗨，kudipem。 3 年前我遇到过这个问题，现在我不记得我是如何解决的了……抱歉。但我确信我使用的 fabricJS 版本现在已经完全过时了，正如 AndreaBogazzi 所说，一些错误现在已经修复。愿原力与你同在:)
@Zorkyd “愿源与你同在”在这里听起来更合适。 :)

标签： svg fabricjs

【解决方案1】：

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

最近在 SVG 解析领域发生了很多改进。我知道这不是 stackoverflow 用户所期望的答案，但最好知道认为这仍然是一个问题。

【讨论】：