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

我在使用FabricJS缩放和旋转SVG图像时遇到了一些问题。如何在FabricJS中修复Inkscape SVG的缩放和旋转？

我一直在为我的网站制作图标生成器。用户可以添加图层，为该图层选择一个图形，然后设置一些选项，如着色和描边宽度。我填充了可能的“形状”，为了最大限度地提高形状复杂性的灵活性，我使用了Inkscape创建的SVG文件。我使用FabricJS中的loadSVGFromURL功能来处理将文件加载到我的画布上。

问题是，当我将这些SVG中的一些（似乎最多）加载到画布上，然后尝试使用手柄缩放和旋转图像时，呈现的结果未按预期显示：Octagon SVG Image and Action Results。

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

我已经尝试过以编程方式更改这些设置，它的行为方式相同。我已经在这里和新闻组的讨论中阅读了几个发布的问题，但没有一个让我得到一个可靠的解

一个非常接近的解决方案是使用优化工具删除一些显然不被织物喜欢的转换数据（该工具在这里找到http://petercollingridge.appspot.com/）。它似乎工作，但不是每个图像，包括这一个。事实上，无论我选择哪种优化选项，该工具都会对八角形进行如此大的改动，但它并不是十分有用的。这个工具也是在这个存在的问题的参考：10470508（问题与SVG显示渲染在面料-JS）

我已经保存了各种格式的Inkscape SVG：Inkscape SVG，普通SVG，和优化的SVG - 没有任何区别。我还尝试在以所有这些格式导出之前简化路径 - 再次，没有区别（尽管对于某些形状，这看起来确实起作用）。

我已经阅读了很多bug，并且参与了包含Kangax的GitHub上的相关讨论，并尝试了诸如centeredRotation属性和对象上的原点。

我注意到Inkscape的x，y为0,0是左下角，我认为这有点奇怪，并且认为这可能与缩放至少有关。为了从这个角度尝试修复它，我在该对象上设置了flipY，但那根本不起作用。它出现在编辑小组之上。它几乎感觉转换点位于边界框的上方。但我无法证实这一点。我检查的所有设置看起来像他们正确设置。

我曾尝试在Illustrator中制作的六角形，它似乎工作，但我没有可用的Illustrator，并且说这是一个“解决方案”，这有点不受欢迎。也许这更好地记录为一个错误，但所有相关的喋喋不休，我有点希望它已经解决，我只是没有找到正确的设置或过程组合。我真的需要能够为这些使用Inkscape。 Kangax指出，Inkscape SVG对FabricJS来说更麻烦，但他继续说它们正在变得更好。所以也许这可能有助于向前迈进一步。

我也回顾了GitHub上的代码本身，但似乎无法确定我需要更改哪些内容才能解决此问题;尽管如此，我并不确定失败的地方在哪里 - 结构，我的设置或我的SVG文件。

UPDATE 2014年2月21日下午10时27 EST

我开始挖掘到SVG文件结构，比较的人给我的麻烦与正在工作的人。它确实看起来像是问题是由于路径，容器或其他对象标签上存在“transform”属性。我试过的优化过程应该已经将它们删除了，但我仍然没有找到一个适用于所有情况的可靠解决方案。我会及时通知你的。

来源

2014-02-21 darksnake747

与发布的其他问题一样，问题仍然存在于路径上的单独转换中。我发现的在线解决方案从来没有像我需要的那样工作得很好;至少与InkScape的SVG无关。直接从InkScape中将SVG另存为不同类型也不会影响最终结果。当“简化”时，一些形状很好;然而，这不够一致。所以，我开始着手开发一个解决方案。

阅读SVG文件结构文档后，我专门创建了这个文件来处理InkScape SVG。有些SVG命令没有处理，但到目前为止，我还没有注意到少数缺少的命令（这些命令仅仅因时间而被排除）的问题。

EvilEye Games - InkScape SVG Transform Remover

在比赛的最后阶段，我决定使用一些免费SVGs从另一个网站。所以这一切都不适合我。但是，我能够弄清楚并解决问题。所以想象一下，这对其他人来说会派上用场。它不完美，但它做到了它所需要的。

来源

2014-04-10 19:30:51 darksnake747

我不太了解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+")")

来源

2014-02-21 18:23:25

难道是有利加载你的SVG文件，使用XMLHttpRequest的XML？然后，您可以将它们视为xml，对它们进行处理，然后通过克隆将它们作为SVG插入。我觉得很漂亮。您可以从XMLdoc中提取元素，并通过克隆它们将其作为svg插入。您也可以在您的html中包含DIV，并将整个xml响应文本转储为它的innerHTML。然后，所有东西都可用于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(); 
    } 
}

来源

2014-02-21 18:49:12

这是一个有趣的想法。感谢您的意见（在这里和之前）;然而，我可能在这里弄错了，但我不知道我是否可以使用任何方法来与Fabric结合使用，这一点我确实需要保留。我会继续考虑这一点，但也许有一些为什么我可以使用它。再次感谢。还没有答案，但很感激。 – darksnake747

祝你好运。在此列表上向前看未来的你。 –

谢谢......我会保持最新，希望我们能看到一个很好的答案。 :) – darksnake747

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

回答

相关问题