<!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>
时间： 2024-09-29 10:53:34