应用所有变换矩阵

Question

我正在寻找一种可能快速的方法来应用给定svg-graphic的所有变换矩阵。换句话说：算法应该删除所有“变换”属性，并将图形的所有坐标转换为绝对坐标。

他们的任何库可以做到这一点，还是他们的任何SVGDomInterface方法都可以做到这一点？

EDIT ::

如果我像这样调用整合方法：

$.each( svg.find( 'path' ), function( i ){
        this.transform.baseVal.consolidate();
});

没有任何反应，如果我这样称呼它：

$.each( svg.find( 'path' ), function( i ){
        this.transform.animVal.consolidate();
});

我收到此错误：

那么，我应该如何使用“合并”方法，我应该在哪个元素上调用它？

问候 菲利普

Answer 1

合并方法仅将矩阵列表缩减为单个矩阵。你在animVal示例中得到的错误是因为你不允许修改动画值（合并破坏性地修改变换列表）。

要回答你的问题，SVN DOM中没有现有的方法可以通过修改路径的值等来应用变换.Inkscape（以及Illustrator IIRC）中有一些选项用于应用这样的变换。

如果您正在寻找执行此操作的库或实用程序，可以尝试SVG Cleaner。

Answer 2

这是一个带有一些javascript库代码（部分基于Raphael.js）的jsFiddle，用于将转换烘焙到所有路径的数据中：

http://jsfiddle.net/ecmanaut/2Wez8/

（不知道Opera在这里有什么用;它通常是SVG中最好的。我可能会以某种方式绊倒其他浏览器更加宽容。）

Answer 3

SVG Cleaner似乎并没有为我应用所有变换，但是Inkscape确实如此。这是我在需要申请时使用的命令行：

inkscape copy-of-file.svg --select=id-of-node \
         --verb=EditCut --verb=EditPaste \
         --verb=FileSave --verb=FileClose

假设你在inkscape的prefs中将“Transforms - ＆gt; Store transformation”设置为“Optimized”（我相信它默认开启），这将应用它并产生想要的结果。确保您对输入文件的副本进行操作，因为该操作会替换原始文件！

如果您在Mac上运行它，您可能需要先在shell中执行此操作：

alias inkscape=/Applications/Inkscape.app/Contents/Resources/bin/inkscape

Answer 4

最好使用 EditPasteInPlace 而不是 EditPaste 。 EditPaste 粘贴在鼠标位置，该位置不是节点的位置。

Answer 5

为了相对于其他一些父DOM节点（例如SVG根容器）检索路径，您可以在此处使用该技术。

它使用SVG.getTransformToElement来计算SVG树上父节点和某个节点之间的转换。返回的对象包含返回变换的逆等的方法，用它做实际的事情。

How to determine size of Raphael object after scaling & rotating it?

我不确切地知道你想要达到的目标，但是它有能力做到这一点。