<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC
    "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
    "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:svg="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
	  xmlns:mathml="http://www.w3.org/1998/Math/MathML">
  <head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
	<style type="text/css">
	body { width: 80%; margin: auto; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0.1em; line-height: 1.3em; font-size: 0.98em;}
	a { padding-right: 4px; padding-left: 4px; }
	#page { background-color: white; padding-top: 70px; padding-bottom: 10px; }
	#logo_container { border-bottom: 1px solid #4CA048; border-top: 1px solid #4CA048; }
	#footer { border-top: 1px solid #4CA048; border-bottom: 1px solid #4CA048; clear: both; text-align: center; padding: 0.8em; margin-top: 0px; margin-bottom: 70px; font-size: 0.65em; font-family: verdana; }
	#footer a { text-decoration: none;  color: black; }
	#footer a:hover { color: white; background-color: black; }
	#back-to-post { padding-bottom: 3em; text-align: right; }
	#back-to-post .post-name { color: #686868; font-weight: bold;}
	#controls input { margin-bottom: 5px;  }
	</style>
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
<![CDATA[
	_uacct = "UA-924619-2";
	urchinTracker();
]]>
</script>
	<script type="text/javascript">
<![CDATA[	

	function add_new_rectangle () {
		var atts = {"stroke-width":"1", "stroke":"blue", "fill":"yellow", "height":"20", "width":"40", "y":"100", "x":"220"};
		var svgNS = "http://www.w3.org/2000/svg";
		var node = document.createElementNS(svgNS, "rect");
		node.setAttributeNS(null, "id", "new-rect");
		for(name in atts) {
			node.setAttributeNS(null, name, atts[name]);
		}
		var cont = document.getElementById("svg-container");
		cont.appendChild(node);
	}

	function change_innerHTML_to_a_new_SVG() {
		var svg_str='<svg:svg height="300" width="700" version="1.1">';
		for(var x=1; x<10; x++) {
			svg_str += '<svg:circle cx="' + (x*30) + 'px" cy="100" r="' + (x*5) + 'px" fill="#ff' + (x*10) +  '00" stroke="#000000" stroke-width="3px"/>';
		}
		svg_str += '</svg:svg>';
		var cont = document.getElementById("svg-content");
		cont.innerHTML = svg_str;
	}
	
]]>
</script>
	<title>Dom Mainpulations of SVG embedded inline inside XHTML</title>
  </head>
  <body>
<div id="page"><div id="logo_container"><a href="http://www.metonymie.com"><img src="http://www.metonymie.com/images/home/metonymie-com.png" id="logo" alt="Metonymie.com Logo" style="border:0px;"/></a></div>
<!-- Content -->
    <h1>Dom manipulations of SVG embedded inline inside XHTML</h1>
	<div id="svg-content">
	<svg:svg height="300" width="700" id="svg-container">
	<svg:rect fill="#ff5500" height="50" width="200" y="100" x="300" stroke="#000000" stroke-width="2px"/>
    <svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px" id="circle"/>

	</svg:svg></div>
	<div id="controls">
	<input type="button" onclick="javascript: alert( document.getElementById('circle').getAttribute('fill') );" value="Getting the Value of an SVG Object Attribute"/><br/>
	<input type="button" onclick="javascript: document.getElementById('circle').setAttribute('fill', '#ffdd22');" value="Changing the Value of an SVG Object Attribute"/><br/>
	<input type="button" onclick="javascript: add_new_rectangle();" value="Adding an SVG Element"/><br/>
	<input type="button" onclick="javascript: alert(document.getElementById('svg-content').innerHTML);" value="Getting the innerhtml"/><br/>
	<input type="button" onclick="javascript: change_innerHTML_to_a_new_SVG();" value="Changing the innerhtml to some new SVG"/><br/>
	
	</div>
<!-- /Content -->

<p id="back-to-post">This is an Example/Project from Blog Post: <a href="http://www.metonymie.com/codewerks/2008/06/21/dom-manipulation-of-svg-embeded-inside-xhtml.html" class="post-name">Dom Manipulation of SVG embeded inside XHTML</a>.</p>
</div>
<div id="footer"><a href="http://validator.w3.org/check?uri=referer">Valid XHTML</a> -  <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS</a> <br/>
Coded by hand, Proudly - Last revision: 21-06-2008
</div>
</body>
</html>
