应用所有变换矩阵

Question

我希望能够找到一种可能快速的方法来应用给定SVG图形的所有变换矩阵。换句话说，该算法应删除所有“transform”属性，并将图形的所有坐标转换为绝对坐标。

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

编辑：

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

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

如果我这样调用它，什么都不会发生：

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

我遇到了这个错误：

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

问候 Philipp

- philipp

---

移除坐标的目的是什么？如果您正在“浏览器中”进行操作，我假设您正在尝试移动SVG容器的viewBox，或者以其他方式发现SVG的两个部分的相对位置/大小。 - Jay Day Zee

Answer 1

consolidate方法只将矩阵列表减少到单个矩阵。在animVal示例中出现的错误是因为不允许修改动画值（consolidate会破坏性地修改变换列表）。

回答你的问题，SVG DOM中没有现有的方法可以通过修改路径等值来应用变换。在Inkscape（和Illustrator也是如此，如果我没记错的话）中有应用这样的变换的选项。

如果你正在寻找一个可以做到这一点的库或实用程序，你可以尝试SVG Cleaner。

- Erik Dahlström

Answer 2

这里有一个基于Raphael.js的javascript库代码的jsFiddle，用于将所有路径数据中的转换嵌入其中： http://jsfiddle.net/ecmanaut/2Wez8/ （不过，不确定Opera在这里遇到了什么问题；它通常是SVG上最佳的。我可能在某些方面出现了问题，而其他浏览器则更容易原谅。）

- ecmanaut

---

看起来不错，但是无法工作 -> 未捕获的类型错误：无法读取未定义的属性“numberOfItems” 在应用变换时（（索引）：76） 在烘烤时（（索引）：44） 在数组中forEach（<匿名>） 在窗口onload时（（索引）：43） - ejectamenta

Answer 3

对于我来说，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

- ecmanaut

Answer 4

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

- madibb

Answer 5

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

它使用SVG.getTransformToElement计算父级和SVG树上某个节点之间的变换。返回的对象包含方法来返回变换的反向等，以便进行实际操作。

如何确定缩放和旋转Raphael对象后的大小？

我不知道您要实现什么，但这具有实现它的功能。

- Jay Day Zee