rendered paste body<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg" version="-//W3C//DTD XHTML 1.1//EN" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>We be drawin' mon</title> <script type='text/javascript; e4x=1'> <![CDATA[ var dx,dy; var svgroot; var svgns; var statusbox; var cg; function init() { statusbox = document.getElementById("sb"); svgroot = document.getElementById('display'); svgroot.addEventListener("click", mouseclick_listener, false); svgns = "http://www.w3.org/2000/svg"; cg = document.getElementById('mycircles'); } function mouseclick_listener(evt) { // alert("beginning stuff"); var circ = document.createElementNS(svgns,"svg:circle"); circ.setAttributeNS(svgns,"cx", evt.layerX); circ.setAttributeNS(svgns,"cy", evt.layerY); cg.appendChild(circ); statusbox.value += "new circle: " + evt.layerX + " " + evt.layerY + "\n";// alert("finished with stuff"); } ]]> </script> </head> <body onload="init();"> <svg:svg id='display' width='600' height='300'> <svg:polyline id='border' points="0,0 600,0 600,300 0,300 0,0" style="stroke:black; fill:none;"/> <svg:g id='mycircles' r='10' fill='red'> </svg:g> </svg:svg> <p><textarea id='sb' rows='15' cols='50'/></p> </body></html>