SVGマトリックス分解

Question

は、我々は返すメソッドelement.getCTM()を持ってSVGMatrixとして：私はこの行列からSX、SYおよび回転の角度を計算したい

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

。

Answer 1

この件に関しては、読んで学ぶべきことがたくさんあります。私は基本的な答えを与えますが、あなたがゲームやアニメーションをやろうとしているなら、これを行う方法ではないことに注意してください。

a == sxとd == syので、あなたはこのようにこれらにアクセスされます：

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 == cos(angle)とb == sin(angle)のために。 Asinとacosだけではあなたに完全な角度を与えることはできませんが、一緒にすることができます。あなたがinverse trigonometric functionsを研究し、unit circle場合、これは動作しますなぜあなたは理解します

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

：あなたはtan = sin/cos以来、あなたが実際にatan2を使用したい問題のちょうどこの種のATANを使用したいです。 http://www.w3.org/TR/SVG/coords.html：ここ

はSVG変換にW3Cのindespensibleリソースです。下にスクロールすると、上記のことについてもっと多くのことを読むことができます。

プログラムでアニメーションを行う方法のUPDATE、使用例を示します。別々に格納された変換を保持し、これらが更新されると、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