mouse pointer problem

I want to draw rectangle over the svg content using a mouse. I can do this when the program structure is like this.
<svg>

</svg>
then I convert the program like this

<svg>
<svg>
</svg>
</svg>

then I can not locate the mouse pointer correctly.
Here is my program. If you can pls correct it.

<svg xml:space="preserve" width="100%" height="100%" viewBox="0 0 1024 768" >

<svg id="root" width="720" height="593" viewBox="-2690 -100 5375 4421">
<defs>
<script><![CDATA[
var zoom_rect = false, click_rect = false, node_rect = "", xsvg = 0, ysvg = 0, xsvg2 = 0, ysvg2 = 0;
function down_rect(evt)
{
if (zoom_rect == false) {
click_rect = true
node_rect = evt.target.ownerDocument.getElementById("zone")
xsvg = Math.round( -2690 + evt.clientX * 5375 / 720) ;
ysvg = Math.round( -100 + evt.clientY * 4421 / 593)
node_rect.setAttributeNS( null , "x" , xsvg.toString()) ;
node_rect.setAttributeNS( null , "y" , ysvg.toString())
node_rect.setAttributeNS( null , "visibility" , "visible")
}else {
node_rect.setAttributeNS( null , "visibility" , "hidden" );
zoom_rect = false ;
click_rect = false
}
}
function move_rect(evt) {
if (click_rect==true) {
xsvg2 = Math.round( -2690 + evt.clientX * 5375 / 720) ;
ysvg2 = Math.round( -100 + evt.clientY * 4421 / 593)
node_rect.setAttributeNS( null , "x" , Math.min( xsvg , xsvg2 ).toString())
node_rect.setAttributeNS( null , "y" , Math.min( ysvg , ysvg2 ).toString())
node_rect.setAttributeNS( null , "width" , Math.abs( xsvg - xsvg2 ).toString())
node_rect.setAttributeNS( null , "height" , Math.abs( ysvg - ysvg2 ).toString())
}
}
function up_rect(evt) {
if (click_rect==true) {
//node_root = evt.target.ownerDocument.getElementById("root");
//node_root.setAttributeNS(null , "viewBox" , Math.min(xsvg,xsvg2).toString() + " " + Math.min(ysvg,ysvg2).toString()+ " " + Math.abs(xsvg2-xsvg).toString() + " " + Math.abs(ysvg2-ysvg).toString());
//node_rect.setAttributeNS( null , "visibility" , "hidden" );
zoom_rect = true ; click_rect = false;
}
}



]]></script>

</defs>
<g id="map" onmousedown="down_rect(evt)" onmousemove="move_rect(evt)" onmouseup="up_rect(evt)">
<rect x="-2690" y="-100" width="5375" height="4421" fill='white'/>

<rect id="zone" fill="none" stroke="red" stroke-width="5" visibility="hidden"/>

</g>


</svg>
</svg>

regards,
kelum

As you use width="100%" and height="100%" in main svg, you need to know width and height for window ( only in IE .... ) or use getScreenCTM() ( ASV6 - Batik )

By default, preserveAspectRatio is xMidYMid, your drawing is centered and you have to calculate :
- ratio
- width of space on sides or top/bottom

scale_x = parseFloat(window.innerWidth/1024);
scale_y = parseFloat(window.innerHeight/768);
scale = Math.min(scale_x,scale_y)
width_svg = scale * 1024;
height_svg = scale * 768;
x_decale = window.innerWidth - width_svg;
y_decale = window.innerHeight - height_svg;
x_origin = x_decale / 2;
y_origin = y_decale / 2;

x_main_svg = (evt.clientX - x_origin) / scale;
y_main_svg = (evt.clientY - y_origin) / scale;

x_map = -2690 + 5375 * x_main_svg * 720 / 1024
y_map = -100 + 4421 * y_main_svg * 593 /768

Michel

I hope that you will not add some percentage and/or preserveAspectRatio in your second svg ...