[英]How to check if svg <g> element supports css transform
Chrome,Firefox和Safari支持通過CSS樣式對svg <g>
元素進行轉換(不帶前綴),而Internet Explorer和Android 4.2.0瀏覽器不支持。
我想檢查瀏覽器是否通過JavaScript支持此功能,例如:
if ( svg_css_Transform_supported() ){
//do something;
}else{
//do nothing;
}
這是一個JSFiddle教程,可以在所有支持的瀏覽器上正常運行:
function svg_css_Transform_supported()
{
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
return 'transform' in svg;
}
在此解決方案之后,我進行了大量搜索,然后發現了來自modernizr線程(elementFromPoint)的另一種技術。 由於您不需要每次都檢查,因此可以將其存儲在cookie中。
我使用的是jQuery及其cookie插件,但是如果您不這樣做,該概念將保持不變:
// 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); } }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.