Làm thế nào để tính toán ma trận biến đổi SVG từ các giá trị xoay/dịch/tỷ lệ?

Question

Tôi đã sau các chi tiết với tôi:

<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)"> 

Cần thay đổi trên đường đến:

<g transform="matrix(?,?,?,?,?,?)"> 

bất cứ ai có thể giúp tôi đạt được điều này?

Answer 1

Dịch (tx, ty) có thể được viết dưới dạng ma trận:

1 0 tx 
0 1 ty 
0 0 1 

Scale (sx, sy) có thể được viết dưới dạng ma trận:

sx 0 0 
0 sy 0 
0 0 1 

Rotate (một) có thể được viết dưới dạng ma trận:

cos(a) -sin(a) 0 
sin(a) cos(a) 0 
0  0  1 

Xoay (a, cx, c y) là sự kết hợp của một bản dịch bằng (-cx, cy), vòng xoay cảng gồm một mức độ và bản dịch trở lại (cx, cy), mang đến cho:

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx 
sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy 
0  0  1 

Nếu bạn chỉ cần nhân này với bản dịch ma trận bạn nhận được:

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx + tx 
sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy + ty 
0  0  1 

nào tương ứng với SVG chuyển đổi ma trận:

(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty).

Trong trường hợp của bạn là: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

Nếu bạn bao gồm quy mô (sx, sy) biến đổi, ma trận là:

(sx × cos(a), sy × sin(a), -sx × sin(a), sy × cos(a), (-cx × cos(a) + cy × sin(a) + cx) × sx + tx, (-cx × sin(a) - cy × cos(a) + cy) × sy + ty)

Lưu ý rằng điều này giả định bạn đang làm biến đổi theo thứ tự bạn đã viết cho họ.

Answer 2

Đầu tiên lấy phần tử g bằng cách sử dụng document.getElementById nếu nó có thuộc tính id hoặc một số phương pháp thích hợp khác, sau đó gọi consolidate ví dụ:

var g = document.getElementById("<whatever the id is>"); 
g.transform.baseVal.consolidate();