如何从旋转/平移/比例值计算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

Scale(sx,sy)可以写成矩阵:

sx  0  0
0  sy  0
0   0  1

旋转(a)可以写成矩阵:

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

旋转(a,cx,cy)是(-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属性或其他适当的方法,则调用巩固,例如

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