cssのtransformプロパティについて質問があります。
transformプロパティに、translate(xpx, ypx)を指定した場合のデータを取得するには、どのようにしたらよいでしょうか?
この時、文字列以外の形式で取得したいです。
ウェブブラウザ:Google Chrome バージョン 45.0.2454.101 m
・試したこと
1.jqueryでcssを適用した場合
$(element).css('transform', 'translate(xpx, ypx)');
もしくは
$(element).css('-webkit-transform', 'translate(xpx, ypx)');
と指定すると、
$(element)[0].style.transform
$(element)[0].style.webkitTransform
で値が文字列で取得できる。
$(element).css('transform')
$(element).css('-webkit-transform')
ではnoneが返ってくる。
2.cssを直接指定
cssで直接指定し、上記のプロパティで取得しようとしても
$(element)[0].style.transform
$(element)[0].style.webkitTransform
では空文字が返ってくる。
$(element).css('transform')
$(element).css('-webkit-transform')
ではnoneが返ってくる。
なお、firefox(41.0.1)では
jqueryでcss適用しても、css直接指定しても、
$(element).css('transform')
でmatrixとしてデータが返ってくるのは確認済みです。
ソースを張っておきますのでご確認ください。
jqueryで指定
$('#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'));
<?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>
cssで指定
$('#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'));
#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);
}
<?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>