8

単純な問題があります。svg 要素に適用される変換行列から、平行移動 (tx, ty)、回転 (r)、およびスケール (sx, sy) の値を抽出したいのです。

この例を使用してみましょう:

<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 を取得するにはどうすればよいですか? ありがとう

4

2 に答える 2

23

この 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-04T09:08:48.827 に答える