index.xml

download original
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var svgns="http://www.w3.org/2000/svg";
var path=null;

function startDraw(evt){
	path=document.createElementNS(svgns,"path");
	var x=evt.clientX;
	var y=evt.clientY;
	path.setAttribute("d","M "+x+" "+y);
	path.setAttribute("stroke","black");
	path.setAttribute("fill","none");
	document.getElementById('target').appendChild(path);
}

function move(evt){
	if(path!=null){
		var d=path.getAttribute('d');
		var x=evt.clientX;
		var y=evt.clientY;
		d= d+ " L "+x+" "+y;
		path.setAttribute("d",d);
	}
}

function stopDraw(evt){
	path=null;
}

</script>
</head>
<body>
<h1>Hello World</h1>

<svg xmlns="http://www.w3.org/2000/svg" height="400">
<g id="target" onmousedown="startDraw(evt)" onmousemove="move(evt)" onmouseup="stopDraw(evt)">
<rect x="20" y="20" width="500" height="400" fill="lightgrey"/>
</g>
</svg>
<p>You can draw lines with the mouse at the grey rectangle</p>
</body>
</html>
back to svg