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

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

我一直在为我的网站设计一个图标生成器。用户可以添加层，为该层选择形状，然后设置许多选项，例如颜色和笔划宽度。我填充了可能的“形状”，为了使形状的复杂性具有最大的灵活性，我使用了我用Inkscape创建的SVG文件。我使用FabricJS中的

loadSVGFromURL

功能将文件加载到画布上

问题是，当我将这些SVG中的一些（似乎是大多数）加载到画布上，然后尝试使用控制柄缩放和旋转图像时，渲染结果没有按预期显示：

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

我曾尝试通过编程更改这些设置，但其行为方式相同。我在这里和新闻组的讨论中读到了一些问题，但没有什么能给我一个可靠的解决方案

一个非常接近的解决方案是使用优化工具删除fabric显然不太喜欢的一些转换数据（在这里可以找到该工具）。这似乎是可行的，但并不是对每一张图片都有效，包括这张。事实上，不管我选择了什么样的优化选项，这个工具对八角形的改变太大了，它实际上不能用作八角形。该工具也是现有问题中的参考：10470508（fabric js中svg显示渲染的问题）

我以各种格式从Inkscape中保存了SVG：Inkscape SVG、普通SVG和优化SVG——没有任何不同。在以所有这些格式导出之前，我还尝试过简化路径——同样，没有区别（尽管对于某些形状，这似乎确实有效）

我已经阅读了很多关于GitHub的bug和相关讨论，其中涉及Kangax，并尝试了

centeredRotation

属性和对象上的原点

我注意到Inkscape的x，y为0，0是左下角，我认为这有点奇怪，我认为这至少与缩放有关。为了从这个角度修复它，我在对象上设置了

flipY

，但这根本不起作用。它出现在编辑面板上方很远的地方。几乎感觉变换点在边界框上方的某个地方。但我无法证实这一点。我检查的所有设置似乎都设置正确

我确实尝试了Illustrator制作的六边形，它似乎很管用，但我并没有Illustrator，所以说这是一个“解决方案”有点不可取。也许这是一个更好的错误记录，但与所有相关的聊天，我有点希望它被解决，我只是没有找到正确的组合设置或过程遵循。我真的需要能够使用Inkscape来实现这些。Kangax指出Inkscape SVG对FabricJ来说更麻烦，但他继续说他们正在变得更好。因此，这或许有助于向前迈出新的一步

我也在GitHub上查看了代码本身，但似乎无法准确指出我需要修改什么来修复这个问题；尽管如此，我并不确定故障点在哪里——结构、设置或SVG文件

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

---

我开始深入研究SVG文件结构，将给我带来麻烦的文件与正在工作的文件进行比较。问题显然是由于路径、容器或其他对象标记上存在“transform”属性。我尝试过的优化过程应该已经删除了它们，但我仍然没有找到一个在所有情况下都有效的解决方案。我会不断更新您的信息。

我对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+")")

---

使用XMLHttpRequest将svg文件作为xml加载是否有利？然后可以将它们作为xml处理，然后通过克隆将它们作为SVG插入。 我想这是天衣无缝的。您可以从XMLdoc中提取元素并将它们作为svg插入，只需克隆它们即可。您还可以在html中包含一个DIV，并将整个xml响应文本作为其内部html转储到其中。然后，所有东西都可以用于DOM工作

var  XMLdoc
function loadSVGasXML()
{
    var SVGFile="my.svg"
    var loadXML = new XMLHttpRequest;
    function handler()
    {
        if(loadXML.readyState == 4 && loadXML.status == 200)
        {
                //---responseText---
                var xmlString=loadXML.responseText
                //---mySVGDiv.innerHTML=xmlString ---
                //---DOMParser---
                var parser = new DOMParser();
                XMLdoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
        }
    }
    if (loadXML != null)
    {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}

---

与其他关于此的问题一样，问题仍然存在于路径上的单个转换中。我发现的在线解决方案从来没有像我需要的那样有效；至少不能和InkScape的SVG合作。在InkScape之外以不同类型保存SVG也不会影响最终结果。有些形状，经过“简化”后，就可以了；然而，它不够一致。因此，我着手开发一个解决方案

在阅读了SVG文件结构文档之后，我专门创建了它来处理InkScape SVG。一些SVG命令未被处理，但到目前为止，我还没有注意到缺少的几个命令（由于时间原因被排除在外）存在问题

---

但最后，我决定使用另一个网站上的一些免费SVG。所以这一切都是为了我，不是为了我。然而，我还是能够解决这个问题。所以我想也许这会对其他人有用。它并不完美，但它做了它需要做的。

这是一个有趣的想法。感谢您的投入（无论是在这里还是之前）；然而，我可能弄错了，但我不知道我是否能以一种方式使用这两种方法