<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTDsvg10.dtd">
<svg width="340" height="320">
<script type="text/javascript"><![CDATA[
function mouse_over(evt){
	valueX = evt.target.getAttribute("x");
	valueY = evt.target.getAttribute("y");

	info = document.documentElement.getElementById("info");
	info.setAttribute("x",evt.clientX+5);
	info.setAttribute("y",evt.clientY);
	info.firstChild.setNodeValue("x="+valueX+", y="+valueY);
}
]]></script>
<text id="info" x="0" y="0"> </text>
<text id="title" x="120" y="40"> </text>
<g transform="translate(60,60)">
<svg width="240" height="200">
<rect x="0" y="0" width="240" height="200" stroke="black" fill="none"/>
<line x1="0" y1="50" x2="240" y2="50"/>
<line x1="0" y1="100" x2="240" y2="100"/>
<line x1="0" y1="150" x2="240" y2="150"/>
<line x1="60" y1="0" x2="60" y2="200" />
<line x1="120" y1="0" x2="120" y2="200" />
<line x1="180" y1="0" x2="180" y2="200" />
</svg>
<svg width="240" height="200" viewBox="50 -190 40 40" preserveAspectRatio="none">
<g id="dpt" transform="scale(1,-1)">
<defs><circle id="pt" cx="0" cy="0" r="0.5" fill="red" /></defs>
<use xlink:href="#pt" x="0" y="0" fill="red" onmouseover="mouse_over(evt)"/>
</g></svg></g>
<text id="xlab" x="150" y="300"> </text>
<text x="60" y="280">50</text>
<text x="120" y="280">60</text>
<text x="180" y="280">70</text>
<text x="240" y="280">80</text>
<text x="300" y="280">90</text>
<text id="ylab" x="25" y="180" transform="rotate(-90,25,180)"> </text>
<text x="35" y="260">150</text>
<text x="35" y="210">160</text>
<text x="35" y="160">170</text>
<text x="35" y="110">180</text>
<text x="35" y="60">190</text>
</svg>