SVG ma trận phân hủy

Question

Trong svg chúng tôi có phương pháp element.getCTM() mà trả về một SVGMatrix như:

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

tôi muốn để tính toán sx, sy và góc quay từ ma trận này.

Answer 1

Có rất nhiều thứ để đọc và tìm hiểu về chủ đề này. Tôi sẽ đưa ra một câu trả lời cơ bản, nhưng hãy nhận biết, nếu bạn đang cố gắng để làm một trò chơi hoặc hình ảnh động, đây không phải là cách để làm điều đó.

a == sx và d == sy, do đó bạn sẽ truy cập vào các như thế này:

var r, ctm, sx, sy, rotation; 

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

Bây giờ cho sự quay a == cos(angle) và b == sin(angle). Asin và acos không thể một mình cung cấp cho bạn góc độ hoàn chỉnh, nhưng cùng nhau họ có thể. Bạn muốn sử dụng atan từ tan = sin/cos và chỉ loại vấn đề bạn thực sự muốn sử dụng atan2:

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

Nếu bạn nghiên cứu inverse trigonometric functions và unit circle bạn sẽ hiểu tại sao các công trình này.

Đây là tài nguyên không thể thiếu của W3C về chuyển đổi SVG: http://www.w3.org/TR/SVG/coords.html. Cuộn xuống một chút và bạn có thể đọc nhiều hơn về những gì tôi đã đề cập ở trên.

CẬP NHẬT, ví dụ cách sử dụng cách tạo hoạt ảnh theo chương trình. Giữ các phép biến đổi được lưu trữ riêng biệt và khi chúng được cập nhật, ghi đè/cập nhật biến đổi phần tử 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