每天一个JavaScript实例-从js脚本中访问object元素中的SVG

时间：2014-11-03 19:29:11 收藏：0 阅读：187
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>每天一个JavaScript实例-从js脚本中访问object元素中的SVG</title>
<style>
	
</style>



</head>

<body>

<object id="object" data = "每天一个JavaScript实例-SVG中的javaScript展示.svg" style="padding:20px;width:600px;height:600px;">
	<p>No SVG support</p>
</object>
<script type="text/javascript">
var object = document.getElementById("object");
object.onload = function(){
	var svgdoc;

	try {
		svgdoc = object.contentDocument;
	}catch(e){
		try{
			svgdoc = object.getSVGDocument();
		}catch(e){
			alert("SVG in object not support in your environment");
		}
	}
	if(!svgdoc) return;
	var r = svgdoc.rootElement;

	var square = svgdoc.getElementById("square");

	square.onclick = function(){
		var width = parseFloat(square.getAttributeNS(null,"width"));
		width -= 50;
		square.setAttributeNS(null,"width",width);
		var color = square.getAttributeNS(null,"fill");
		if(color == "bule"){
			square.setAttributeNS(null,"fill","yellow");
			square.setAttributeNS(null,"stroke","green");
		}else{
			square.setAttributeNS(null,"fill","bule");
			square.setAttributeNS(null,"stroke","red");

		}
	}
}
</script>
</body>
</html>