javascript - 如何修复 FabricJS 中 Inkscape SVG 的缩放和旋转？

Question

我在使用 FabricJS 缩放和旋转 SVG 图像时遇到了一些问题。

我一直在为我的网站开发图标构建器。用户可以添加图层，为该图层选择形状，然后设置许多选项，例如颜色和笔画宽度。我填充了可能的“形状”，并且为了在形状的复杂性方面获得最大的灵 active ，我使用了我用 Inkscape 创建的 SVG 文件。我使用 loadSVGFromURL FabricJS 中用于处理将文件加载到我的 Canvas 上的功能。

问题是当我将这些 SVG 中的一些(似乎是大多数)加载到 Canvas 上然后尝试使用 handle 缩放和旋转图像时，渲染结果没有按预期显示:Octagon SVG Image and Action Results .

在该图像上，不要担心“切片”边缘，这只是编辑器的边界。将我的 octogon.svg 加载到 Canvas 后，它看起来不错。当我旋转时，它会变得困惑。我向右和向下旋转，图像向左和向上移动。然后，当我缩放时，它会垂直向相反的方向移动。

我已经尝试以编程方式更改这些设置，并且它的行为方式相同。我在这里和新闻组讨论中阅读了几个张贴的问题，但没有什么能给我一个可靠的解决方案。

一个非常接近的解决方案是使用优化工具来删除一些显然不被 fabric 喜欢的转换数据(该工具可在此处找到 http://petercollingridge.appspot.com/)。它似乎有效，但并非适用于每一张图片，包括这张图片。事实上，无论我选择何种优化选项，该工具都对八 Angular 形进行了如此大的改动，它并不能真正用作八 Angular 形。在这个现有问题中也引用了该工具:10470508(issue-with-svg-display-rendering-in-fabric-js)

我已经以各种格式从 Inkscape 中保存了 SVG:Inkscape SVG、plain SVG 和 Optimized SVG - 没有任何区别。在以所有这些格式导出之前，我还尝试过简化路径 - 同样，没有区别(尽管对于某些形状，这似乎确实有效)。

我在 GitHub 上阅读了许多 bug 以及与 Kangax 相关的讨论，并尝试了 centeredRotation 之类的东西。对象上的属性和原点。

我注意到 Inkscape 的 x,y 为 0,0 是左下角，我认为这有点奇怪，并认为这至少与缩放有关。为了尝试从这个 Angular 修复它，我设置了 flipY在对象上，但这根本不起作用。它出现在编辑器面板上方很远的地方。几乎感觉变换点在边界框上方的某个地方。但我无法验证这一点。我检查的所有设置似乎都设置正确。

我确实尝试过用 Illustrator 制作的六边形，它似乎可以工作，但我没有 Illustrator 可供我使用，并且说这是一个“解决方案”有点不可取。也许最好将其记录为错误，但是对于所有相关的喋喋不休，我有点希望它得到解决，我只是没有找到要遵循的正确设置或流程组合。我真的需要能够为这些使用 Inkscape。 Kangax 指出 Inkscape SVG 对 FabricJS 来说更麻烦，但他接着说它们正在变得更好。因此，也许这有助于向前迈出一步。

我还在 GitHub 上查看了代码本身，但似乎无法确定我需要更改什么来解决这个问题；不过，我不确定故障点在哪里——织物、我的设置或我的 SVG 文件。

更新 2014 年 2 月 21 日美国东部标准时间晚上 10:27

我开始深入研究 SVG 文件结构，比较那些给我带来麻烦的和那些正在工作的。问题似乎确实是由于路径、容器或其他对象标记上存在“转换”属性。我尝试过的优化过程应该已经删除了它们，但我仍然没有找到一个适用于所有情况的可靠解决方案。我会及时通知你的。

Answer 1

我对fabricjs和Inkscape了解不多，但使用svg DOM，以下将适用于单独应用于元素的旋转和缩放转换:也许你可以应用这个。如果要旋转+缩放元素，可以附加转换字符串或使用转换矩阵。希望这可以帮助

var bb=elem.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//----rotate from center of elem---
elem.setAttribute("transform","rotate(angle "+cx+" "+cy+")") 
//---scale: translate center to(0,0)+scale+translate back---
elem.setAttribute("transform","translate("+cx+" "+cy+")scale(myScale)translate("+(-cx)+" "+(-cy+")")