<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG and DOM 1</title>
<meta http-equiv="Content-Type" content="text/xml; charset=utf-8" />
<style type="text/css" media="screen">

div[id="test"] {
	width: 200px;
	height: 200px;
	background-color: red;
}

svg, rect {
	display: block;
}

rect {
	width: 200px;
	height: 200px;
	background-color: green;
}


</style>

<script type="text/javascript">
<![CDATA[

window.onload = function () {

	var test = document.getElementById("test");
	var svg = document.createElement("svg");
	svg.setAttribute("width", "200");
	svg.setAttribute("height", "200");
	svg.setAttribute("version", "1.1");
	svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
	test.appendChild(svg);
	var rect = document.createElement("rect");
	rect.setAttribute("x", "0");
	rect.setAttribute("y", "0");
	rect.setAttribute("width", "200");
	rect.setAttribute("height", "200");
	rect.setAttribute("fill", "green");
	svg.appendChild(rect);
	
	
	
};
]]>

</script>

</head>

<body>

<p>You should see a green square below, with no red.</p>


<div id="test"></div>




</body>
</html>
