svg zoom

hi,
I tried the zooming example in

http://pilat.free.fr/tutorial2/zoom.svg
and edited accoring to my requirements as follows.

<svg id="root" viewBox="0 0 5375 4421">

<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( 0 + evt.clientX * 5375 / 720)
ysvg = Math.round( 0 + 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_root = evt.target.ownerDocument.getElementById("root")
node_root.setAttributeNS( null , "viewBox" , "0 0 5375 4421")
zoom_rect = false
click_rect = false
}
}
function move_rect(evt) {
if (click_rect==true) {
xsvg2 = Math.round( 0 + evt.clientX * 5375 / 720)
ysvg2 = Math.round( 0 + 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 , "with" , 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>

<g onmousedown="down_rect(evt)" onmousemove="move_rect(evt)" onmouseup="up_rect(evt)">
<rect x="10" y="10" width="800" height="800" stroke="blue" stroke-width="30" fill="none"/>
<rect x="100" y="100" width="400" height="400" stroke="blue" stroke-width="20" fill="none"/>

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

but it does not work properly.
the main thing that i can not understand is calculating xsvg2....
if you can pls help me.
I am so much confusing about viewBox and height weight attributes in <svg> tag.
pls help me.In here(Sri lanka) i can not find books or proffessionals.
pls help me.
thanks,
kelum

This script need width and height attributes to calculate coordinates ( xsvg, ysvg, xsvg2, ysvg2) in svg viewport from clientX and clientY in window object as ASV3 don't know getScreenCTM ...
With ASV6 or Batik, you can use getScreenCTM to get svg coordinates from pointer position.
<svg id="root" width="720" height="593" viewBox="0 0 5375 4421">
When you click script store xsvg and ysvg where user click
When pointer move, xsvg2 and ysvg2 are pointer current coordinates to draw rectangle from (xsvg,ysvg) to (xsvg2,ysvg2)
Zoom is make by modifying viewBox attribute.

See
http://pilat.free.fr/tutorial2/zoom.svg
for details and other methods

Michel

hi,
now i am using ASV6.
how can i improve using this?
regards,
kelum.