如何從旋轉/平移/縮放值計算SVG變換矩陣？

Question

我有以下細節我：

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

需要改變上述行：

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

誰能幫助我實現這一目標？

Answer 1

翻譯（TX，TY）可以寫爲矩陣：

1 0 tx 
0 1 ty 
0 0 1 

量表（SX，SY）可以寫爲矩陣：

sx 0 0 
0 sy 0 
0 0 1 

旋轉（一）可以寫爲矩陣：

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

旋轉（一，CX，C y）是翻譯的（-CX，CY），一個度的旋轉和平移回（CX，CY），這給組合：

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 

如果你只是乘以這個與翻譯矩陣你：

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 

對應於SVG變換矩陣：

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

你的情況是：matrix(0.866, -0.5 0.5 0.866 8.84 58.35)。

如果包括規模（SX，SY）變換，矩陣是：

(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)

注意，這裏假設你正在做的轉換中，你寫的順序。

Answer 2

首先得到採用的document.getElementById g組件，如果它有一個id屬性或一些其他適當的方法，然後調用consolidate例如

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