问题描述
我有以下详细信息:
<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)">
需要将上述行更改为:
<g transform="matrix(?,?,?,?,?,?)">
有人可以帮助我实现这一目标吗?
Can anyone help me to achieve this?
推荐答案
Translate(tx，ty)可以写为矩阵:
Translate(tx, ty) can be written as the matrix:
1 0 tx
0 1 ty
0 0 1
Scale(sx，sy)可以写为矩阵:
Scale(sx, sy) can be written as the matrix:
sx 0 0
0 sy 0
0 0 1
Rotate(a)可以写成矩阵:
Rotate(a) can be written as a matrix:
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
Rotate(a，cx，cy)是(-cx，cy)的平移，度旋转和返回(cx，cy)的平移的组合，得出:
Rotate(a, cx, cy) is the combination of a translation by (-cx, cy), a rotation of a degrees and a translation back to (cx, cy), which gives:
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
如果仅将其与翻译矩阵相乘，则会得到:
If you just multiply this with the translation matrix you get:
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变换矩阵:
Which corresponds to the SVG transform matrix:
(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)变换，则矩阵为:
If you include the scale (sx, sy) transform, the matrix is:
(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)
请注意，这是假设您按照编写顺序进行转换.
Note that this assumes you are doing the transformations in the order you wrote them.
这篇关于如何从旋转/平移/缩放值计算SVG变换矩阵?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！