如何提取位置，从矩阵SVG旋转和缩放

我有一个简单的问题：我想提取翻译（TX，TY），旋转（R）和规模（SX，SY）值构成应用于变换矩阵我svg元素。如何提取位置，从矩阵SVG旋转和缩放

让我们用这个例子：

<g 
    id="myElement" 
    transform="matrix(0.93893241,0.34410162,-0.34410162,0.93893241,363.88475,-76.125919)" 
    >... </g>

如果在JavaScript我做

document.getElementById("myElement").getCTM()

我可以访问到A，B，C，d，E，F值。我如何从那里获得tx，ty，sx，sy和r？感谢

来源

2013-05-03 lviggiani

此ActionScript版本的启发：https://gist.github.com/fwextensions/2052247，我写了一个JavaScript接口：

function deltaTransformPoint(matrix, point) { 

     var dx = point.x * matrix.a + point.y * matrix.c + 0; 
     var dy = point.x * matrix.b + point.y * matrix.d + 0; 
     return { x: dx, y: dy }; 
    } 


    function decomposeMatrix(matrix) { 

     // @see https://gist.github.com/2052247 

     // calculate delta transform point 
     var px = deltaTransformPoint(matrix, { x: 0, y: 1 }); 
     var py = deltaTransformPoint(matrix, { x: 1, y: 0 }); 

     // calculate skew 
     var skewX = ((180/Math.PI) * Math.atan2(px.y, px.x) - 90); 
     var skewY = ((180/Math.PI) * Math.atan2(py.y, py.x)); 

     return { 

      translateX: matrix.e, 
      translateY: matrix.f, 
      scaleX: Math.sqrt(matrix.a * matrix.a + matrix.b * matrix.b), 
      scaleY: Math.sqrt(matrix.c * matrix.c + matrix.d * matrix.d), 
      skewX: skewX, 
      skewY: skewY, 
      rotation: skewX // rotation is the same as skew x 
     };   
    }

用法：decomposeMatrix(document.getElementById('myElement').getCTM())

来源

2013-05-04 09:08:48 dave

非常感谢您的回答！一旦我有电脑回来，我会尝试一下，我会给出一个反馈。 – lviggiani 2013-05-06 11:54:17

我没有得到确切的e，f值？为什么？ – 2014-10-19 09:48:20

旋转可以更直接地计算，参见：http://stackoverflow.com/a/4361442 – neo 2016-05-08 09:42:06

如何提取位置，从矩阵SVG旋转和缩放

回答

相关问题