CSSのtransform、translateを取得するには？


cssのtransformプロパティについて質問があります。  
transformプロパティに、translate(xpx, ypx)を指定した場合のデータを取得するには、どのようにしたらよいでしょうか？  
この時、文字列以外の形式で取得したいです。  
ウェブブラウザ:Google Chrome バージョン 45.0.2454.101 m

・試したこと  
1.jqueryでcssを適用した場合

[code]

    $(element).css('transform', 'translate(xpx, ypx)');
    
[/code]

もしくは

[code]

    $(element).css('-webkit-transform', 'translate(xpx, ypx)');
    
[/code]

と指定すると、

[code]

    $(element)[0].style.transform
    $(element)[0].style.webkitTransform
    
[/code]

で値が文字列で取得できる。

[code]

    $(element).css('transform')
    $(element).css('-webkit-transform')
    
[/code]

ではnoneが返ってくる。

2.cssを直接指定  
cssで直接指定し、上記のプロパティで取得しようとしても

[code]

    $(element)[0].style.transform
    $(element)[0].style.webkitTransform
    
[/code]

では空文字が返ってくる。

[code]

    $(element).css('transform')
    $(element).css('-webkit-transform')
    
[/code]

ではnoneが返ってくる。

なお、firefox(41.0.1)では  
jqueryでcss適用しても、css直接指定しても、

[code]

    $(element).css('transform')
    
[/code]

でmatrixとしてデータが返ってくるのは確認済みです。

ソースを張っておきますのでご確認ください。  
jqueryで指定

[code]

    $('#rect1').css('transform', 'translate(50px, 50px)');
    $('#rect1').css('-webkit-transform', 'translate(50px, 50px)');
    $('#rect1').css('-moz-transform', 'translate(50px, 50px)');
    $('#rect1').css('-o-transform', 'translate(50px, 50px)');
    $('#rect1').css('-ms-transform', 'translate(50px, 50px)');
    
    
    $('#value1').text('style.transform: '+$('#rect1')[0].style.transform);
    $('#value2').text('style.webkitTransform: '+$('#rect1')[0].style.webkitTransform);
    $('#value3').text('transform: ' + $('#rect1').css('transform'));
    $('#value4').text('-webkit-transform: ' + $('#rect1').css('-webkit-transform'));
    $('#value5').text('-moz-transform: ' + $('#rect1').css('-moz-transform'));
    $('#value6').text('-o-transform: ' + $('#rect1').css('-moz-transform'));
    $('#value7').text('-ms-transform: ' + $('#rect1').css('-moz-transform'));
[/code]

[code]

    <?xml version="1.0" ?>
    <svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style='background:gray;'>
        <rect id='rect1' x="0" y="0" width="100" height="100" />
    </svg>
    <p id='value1'></p>
    <p id='value2'></p>
    <p id='value3'></p>
    <p id='value4'></p>
    <p id='value5'></p>
    <p id='value6'></p>
    <p id='value7'></p>
[/code]

cssで指定

[code]

    $('#value1').text('style.transform: '+$('#rect1')[0].style.transform);
    $('#value2').text('style.webkitTransform: '+$('#rect1')[0].style.webkitTransform);
    $('#value3').text('transform: ' + $('#rect1').css('transform'));
    $('#value4').text('-webkit-transform: ' + $('#rect1').css('-webkit-transform'));
    $('#value5').text('-moz-transform: ' + $('#rect1').css('-moz-transform'));
    $('#value6').text('-o-transform: ' + $('#rect1').css('-moz-transform'));
    $('#value7').text('-ms-transform: ' + $('#rect1').css('-moz-transform'));
[/code]

[code]

    #rect1 {
        transform: translate(50px, 50px);
        -moz-transform: translate(50px, 50px);
        -webkit-transform: translate(50px, 50px);
        -o-transform: translate(50px, 50px);
        -ms-transform: translate(50px, 50px);
    }
[/code]

[code]

    <?xml version="1.0" ?>
    <svg width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style='background:gray;'>
        <rect id='rect1' x="0" y="0" width="100" height="100" />
    </svg>
    <p id='value1'></p>
    <p id='value2'></p>
    <p id='value3'></p>
    <p id='value4'></p>
    <p id='value5'></p>
    <p id='value6'></p>
    <p id='value7'></p>
[/code]




  
Chrome では`getComputedStyle`で "none" が返るようですね。なぜでしょうか。

[code]

    rect = document.querySelector("#rect1");
    transform = getComputedStyle(react).transform;
    // firefox -> "matrix(1, 0, 0, 1, 50, 50)"
    // chrome  -> "none"
    
[/code]

文字列でなく行列を得たい場合、Chrome
は`WebKitCSSMatrix`が`translate`関数などを使った文字列をパース出来るようなので`style.transform`が使える場合はこれでいいかもしれません。  
Firefox の`DOMMatrix`は`matrix`関数しかパースしないように見えますが、こちらは
`getComputedStyle`が機能するので、これを使えばよさそうです。  
（これが仕様に沿ったやり方かはまったく分かりません）

[code]

    rect = document.querySelector("#rect1");
    
    // chrome
    matrix = new WebKitCSSMatrix(rect.style.transform);
    // firefox
    matrix = new DOMMatrix(getComputedStyle(rect).transform);
    
[/code]




  
Chrome では`getComputedStyle`で "none" が返るようですね。なぜでしょうか。

[code]

    rect = document.querySelector("#rect1");
    transform = getComputedStyle(react).transform;
    // firefox -> "matrix(1, 0, 0, 1, 50, 50)"
    // chrome  -> "none"
    
[/code]

文字列でなく行列を得たい場合、Chrome
は`WebKitCSSMatrix`が`translate`関数などを使った文字列をパース出来るようなので`style.transform`が使える場合はこれでいいかもしれません。  
Firefox の`DOMMatrix`は`matrix`関数しかパースしないように見えますが、こちらは
`getComputedStyle`が機能するので、これを使えばよさそうです。  
（これが仕様に沿ったやり方かはまったく分かりません）

[code]

    rect = document.querySelector("#rect1");
    
    // chrome
    matrix = new WebKitCSSMatrix(rect.style.transform);
    // firefox
    matrix = new DOMMatrix(getComputedStyle(rect).transform);
    
[/code]

