如何检查SVG <g> 元素支持CSS转换

Question

Chrome, Firefox and Safari supports tranformation of svg <g> element by CSS style without prefixes, while Internet Explorer and Android 4.2.0 browser does not support it.

I want to check if the browser supports this feature or not by JavaScript, for example like this:

if ( svg_css_Transform_supported() ){
//do something;
}else{
//do nothing;
}

This is a JSFiddle tutorial running well on all supported browsers:

http://jsfiddle.net/samehobada/w95298kf/

Answer 1

function svg_css_Transform_supported()
{
    var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    return 'transform' in svg;
}

Answer 2

I searched a lot after this solution, and found another technique from modernizr threads (elementFromPoint). Since you don't need to check this every time, you can store it in cookie.

I'm using jQuery and its cookie pluggin, but the concept stays the same if you don't :

 // svg transform support test svgTransformSupport = function () { if (typeof $.cookie('svgtransform') === 'undefined') { var svg = $('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2" id="oksvgtransform"><path id="nosvgtransform" d="M0 0h1v1H0z"/></svg>'); $body.append(svg); // straight test if ('transform' in svg[0]) { $.cookie('svgtransform',true); console.log('straight css test svg transform ok'); return true; } // real test svg.css({ 'position':'fixed', 'width':'2px', 'height':'2px', 'left':'0px', 'top':'0px', 'z-index':'1000', }); $('#nosvgtransform').css({ 'transform':'translate(1px,1px)', }); var isSupport = (document.elementFromPoint(0, 0).id=="oksvgtransform"); svg.remove(); $.cookie('svgtransform',isSupport); if (isSupport) { console.log('element from point test svg transform ok'); } else { console.log('element from point test svg transform failed'); } return(isSupport); } else if ($.cookie('svgtransform')=="true") { console.log('cookie test svg transform ok'); return (true); } else { console.log('cookie test svg transform fail'); return (false); } }