如何从旋转/平移/缩放值计算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();