如何检查svg<g>元素支持css转换

How to check if svg <g> element supports css transform

本文关键字：gt 元素 支持 转换 css 何检查 lt 检查 svg      更新时间：2023-09-26

Chrome、Firefox和Safari支持无前缀的CSS样式转换svg <g>元素，而Internet Explorer和Android 4.2.0浏览器不支持。

我想通过JavaScript检查浏览器是否支持此功能，例如：

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

这是一个在所有支持的浏览器上运行良好的JSFiddle教程：

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

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);
	}
}

相关文章：