Svg爲矩陣分解

Question

在SVG我們有方法element.getCTM()它返回一個SVGMatrix爲：

[a c e][b d f][0 0 1] 

我想從這個矩陣計算SX，SY和旋轉的角度。

Answer 1

在這個問題上有很多需要閱讀和學習的內容。我會給出一個基本的答案，但請注意，如果你正在嘗試做一個遊戲或動畫，這不是實現它的方法。對於旋轉a == cos(angle)和b == sin(angle)

var r, ctm, sx, sy, rotation; 

r = document.querySelector('rect'); // access the first rect element 
ctm = r.getCTM(); 
sx = ctm.a; 
sy = ctm.d; 

現在：

a == sx和d == sy，所以你訪問這些像這樣。阿辛和阿科斯不能單獨給你完整的角度，但他們可以一起。你想用反正切，因爲tan = sin/cos和只是這樣那樣的問題，你真的想使用atan2：

RAD2DEG = 180/Math.PI; 
rotation = Math.atan2(ctm.b, ctm.a) * RAD2DEG; 

如果你研究的inverse trigonometric functions和unit circle你就會明白爲什麼這個工程。

這是W3C在SVG轉換上的不可或缺的資源：http://www.w3.org/TR/SVG/coords.html。向下滾動一下，你可以閱讀更多關於我上面提到的內容。

更新，示例用法如何以編程方式做動畫。保持轉換單獨存儲，並在更新時轉換，覆蓋/更新SVG元素轉換。

var SVG, domElement, ... 

// setup 
SVG  = document.querySelector('svg'); 
domElement = SVG.querySelector('rect'); 
transform = SVG.createSVGTransform(); 
matrix  = SVG.createSVGMatrix(); 
position = SVG.createSVGPoint(); 
rotation = 0; 
scale  = 1; 

// do every update, continuous use 
matrix.a = scale; 
matrix.d = scale; 
matrix.e = position.x; 
matrix.f = position.y; 

transform.setMatrix(matrix.rotate(rotation)); 
domElement.transform.baseVal.initialize(transform); // clear then put