Matrix Svg矩阵分解

在svg中，我们有一个方法

element.getCTM（）

，它返回一个

SVGMatrix

作为：

[a c e][b d f][0 0 1] 

---

我想从这个矩阵计算sx，sy和旋转角度。

关于这个主题，有很多内容需要阅读和学习。我会给出一个基本的答案，但要知道，如果你想做一个游戏或动画，这不是做它的方式

a==sx

和

d==sy

，因此您可以这样访问它们：

var r, ctm, sx, sy, rotation;

r   = document.querySelector('rect'); // access the first rect element
ctm = r.getCTM();
sx  = ctm.a;
sy  = ctm.d;

现在旋转

a==cos（角度）

和

b==sin（角度）

。Asin和acos不能单独为你提供完整的角度，但他们可以一起提供。您想要使用atan，因为

tan=sin/cos

，而对于这类问题，您实际上想要使用

atan2

：

RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;

如果你研究了和，你就会明白为什么这是有效的

以下是W3C关于SVG转换的不可解析资源：。向下滚动一点，你可以阅读更多关于我上面提到的内容

更新，示例用法如何以编程方式制作动画。将转换单独存储，并在更新转换时覆盖/更新SVG元素转换

var SVG, domElement, ...

// setup
SVG        = document.querySelector( 'svg' );
domElement = SVG.querySelector( 'rect' );
transform  = SVG.createSVGTransform();
matrix     = SVG.createSVGMatrix();
position   = SVG.createSVGPoint();
rotation   = 0;
scale      = 1;

// do every update, continuous use
matrix.a = scale;
matrix.d = scale;
matrix.e = position.x;
matrix.f = position.y;

transform.setMatrix( matrix.rotate( rotation ) );
domElement.transform.baseVal.initialize( transform ); // clear then put

---

帮助我解决这个问题。如何找到svg动画的分解值？你想做什么动画？你需要什么样的价值观？请描述更多。我想说的是，如果我有一个svg动画，其中许多动画节点，如animateTransform（平移、缩放、旋转）和animateMotion被附加到一个容器节点。因此，如果我想将此动画简化为单个平移、旋转、缩放和倾斜，这在ctm的帮助下是可能的，因为ctm是组合变换矩阵。要实现当前变换，我应该在平移、旋转、缩放和倾斜节点中输入哪些值。这需要大量工作。使用

animateTransform

、

animateMotion

和其他动画元素时，不应以编程方式控制它们。如果要以编程方式控制动画，则需要直接使用元素变换。我用一个例子更新了上面的答案。我用奇异值分解（SVD）找到了解决方案，它给出了像A=USV*这样的矩阵，其中U和V*是旋转矩阵，S是比例矩阵。假设U的第一行是[a11 a12]，第二行是[a21 a22]。如何获得旋转坐标系轴的角度？