Svg矩阵分解

在 svg 中我们有方法element.getCTM()它返回一个SVGMatrix as:

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

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

关于这个主题有很多东西需要阅读和学习。我将给出一个基本的答案，但请注意，如果您正在尝试制作游戏或动画，这不是这样做的方法。

a == sx and 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(angle) and b == sin(angle)。 Asin 和 acos 无法单独为您提供完整的角度，但他们一起可以。你想使用atan，因为tan = sin/cos对于这种问题你实际上想使用atan2:

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

如果你研究的是反三角函数 http://en.wikipedia.org/wiki/Inverse_trigonometric_functions和单位圆 http://en.wikipedia.org/wiki/Unit_circle你就会明白为什么这有效。

以下是 W3C 关于 SVG 转换的不可或缺的资源：http://www.w3.org/TR/SVG/coords.html http://www.w3.org/TR/SVG/coords.html。向下滚动一点，您可以阅读更多有关我上面提到的内容。

更新，示例用法如何以编程方式执行动画。单独存储转换，并在更新这些转换时覆盖/更新 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