在 SVG 中,我们有一个方法叫做 element.getCTM()
,它返回一个 SVGMatrix
,如下所示:
[a c e][b d f][0 0 1]
我希望从这个矩阵中计算出sx、sy和旋转角度。
在 SVG 中,我们有一个方法叫做 element.getCTM()
,它返回一个 SVGMatrix
,如下所示:
[a c e][b d f][0 0 1]
这个主题有很多要学习和阅读的内容。我会给出一个基本答案,但请注意,如果你想做游戏或动画,这不是正确的方法。
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(angle)
和 b == sin(angle)
。asin和acos不能单独给出完整的角度,但它们可以一起使用。你需要使用atan,因为 tan = sin/cos
,而对于这种问题,你实际上需要使用atan2
。RAD2DEG = 180 / Math.PI;
rotation = Math.atan2( ctm.b, ctm.a ) * RAD2DEG;
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
animateTransform
、animateMotion
和其他动画元素时,你不应该以编程的方式控制它们。如果你想以编程的方式控制动画,你需要直接使用元素变换。我在上面更新了我的答案,并提供了一个例子。 - bennedich