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는 당신에게 완전한 각도를 줄 수는 없지만 함께 할 수는 있습니다. 당신은 tan = sin/cos 이후 ATAN을 사용하려는 문제의 단지 이런 종류의 당신은 실제로 atan2를 사용하려면 :

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

것은 당신이 inverse trigonometric functions이 작동하는 이유를 이해할거야 unit circle 연구합니다.

다음은 SVG 변환에 대한 W3C의 식별 할 수없는 리소스입니다 : 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