應用所有變換矩陣

我正在尋找一種可能的快速方法來應用給定svg圖形的所有變換矩陣。換句話說：該算法應刪除所有「變換」屬性並將圖形的所有座標轉換爲絕對座標。應用所有變換矩陣

是他們的任何庫可以做到這一點，或者是他們的SVGDomInterface方法嗎？

編輯::

如果我叫了鞏固的方法是這樣的：

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

什麼也不會發生，如果我這樣稱呼它：

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

我得到這個錯誤：

error

那麼，我應該如何使用「鞏固」的方法，我應該在哪些元素上調用它？

問候菲利普

2012-04-12 philipp

刪除座標的目的是什麼？如果你在「瀏覽器中」這樣做，我假設你試圖移動SVG容器的viewBox，或者發現SVG兩部分的相對位置/大小 – 2016-05-07 08:02:54

的鞏固方法僅降低了矩陣的列表，以一個單一的矩陣。並且您在animVal示例中遇到的錯誤是因爲您不允許修改動畫值（合併破壞性地修改變換列表）。

爲了回答你的問題，沒有SVG DOM中的現有方法通過修改路徑值等來應用變換.Inkscape（和Illustrator IIRC）中提供了用於應用這種變換的選項。

如果您正在尋找一個圖書館或工具來做到這一點，您可以嘗試SVG Cleaner。

2012-04-13 09:17:47

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

2012-06-08 00:44:02 ecmanaut

這裏有一個的jsfiddle一些JavaScript庫的代碼（基於在Raphael.js一部分）烤在轉換成所有路徑的數據：

（不知道有什麼用Opera的在這裏，雖然，它通常是在SVG類最好的，我可以以某種方式被絆了其他瀏覽器更寬容有關）

2012-07-09 07:24:28 ecmanaut

更好地使用EditPasteInPlace而不是EditPaste。 EditPaste粘貼在鼠標位置，這不是節點的位置。

2013-02-17 01:07:52 madibb

爲了檢索相對於其他父DOM節點（例如SVG根容器）的路徑，您可以在此處使用該技術。

它使用SVG.getTransformToElement來計算SVG樹上的父節點和某個節點之間的變換。返回的對象包含返回變換的逆等的方法，以便用它做實際的事情。

我不知道你想實現什麼，但是這必須做它的力量。

2016-05-07 08:06:05

回答