应用所有变换矩阵答案

【问题标题】：apply all transform matrices应用所有变换矩阵
【发布时间】：2012-04-24 23:19:08
【问题描述】：

我正在寻找一种可能快速的方法来应用给定 svg 图形的所有变换矩阵。也就是说：算法应该去掉所有的“变换”属性，把图形的所有坐标都变换成绝对坐标。

他们是否有任何库可以做到这一点，或者他们有任何 SVGDomInterface 方法可以做到这一点？

编辑::

如果我这样调用合并方法：

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

什么都不会发生，如果我这样称呼它：

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

我得到这个错误：

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

问候菲利普

【问题讨论】：

【解决方案1】：

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

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

我不知道你到底想达到什么目标，但这有能力做到这一点。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

（但不确定 Opera 是怎么回事；它通常在 SVG 上是同类中最好的。我可能在某些方面遇到了其他浏览器更宽容的问题。）

【讨论】：

【解决方案4】：

SVG Cleaner 似乎没有为我应用所有转换，但 Inkscape 可以。这是我需要应用时使用的命令行：

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

假设您在inkscape 的首选项中将“转换-> 存储转换”设置为“优化”（我相信它默认是打开的），这将应用它并产生想要的结果。确保您对输入文件的副本进行操作，因为该操作会替换您的原始文件！

如果您在 Mac 上运行它，您可能希望首先在您的 shell 中执行此操作：

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

【讨论】：

【解决方案5】：

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

要回答您的问题，SVG DOM 中没有现有方法可以通过修改路径的值等来应用变换。Inkscape（以及 Illustrator 也有 IIRC）中有用于应用此类变换的选项。

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

【讨论】：