javascript - 应用所有变换矩阵

Question

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

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

编辑：：

如果我这样调用 consolidate 方法：

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

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

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

我收到此错误：

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

问候菲利普

score 8 · Accepted Answer

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

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

score 7 · Accepted Answer

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

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

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

score 6 · Accepted Answer

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

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

我不确切知道您要达到的目标，但这有能力做到这一点。

5 回答 5