panning svg problem

hi

the following code aloows user to pan the group of objects up ,down ,right and left but one action at the same direction could not make it work to pan the object at the same direction more then once



how can i solve this problem please

and thanks in advance


<svg id="SVG" width="500" height="700" onload="Initialize(evt)"
xmlns="http://www.w3.org/2000/svg">
<script type="text/javascript">
<![CDATA[
var SVGRoot;
var SVGDoc;

var translate=0;



function Initialize(evt){
SVGDoc = evt.getTarget().getOwnerDocument();
SVGRoot = SVGDoc.getElementById("to-be-updated");


}


function Up(dir){

if(dir == "up"){
translate=-100;

SVGRoot.setAttribute('transform','translate(0,'+tr anslate+')');

}else if(dir == "down"){
translate=100;
SVGRoot.setAttribute('transform','translate(0,'+tr anslate+')');


}else if(dir == "Right"){
translate=-100;
SVGRoot.setAttribute('transform','translate('+tran slate+',0)');

}else if(dir == "left"){
translate=100;
SVGRoot.setAttribute('transform','translate('+tran slate+',0)');


}

}




]]>
</script>

<text x="100" y="55" style="font-size:30px; font-weight:bold; "
onclick="zoom('in')">+</text>
<text x="130" y="40" style="font-size:30px; font-weight:bold; "
onclick="zoom('out')">_</text>


<text x="10" y="50" style="font-size:15px; font-weight:bold; "
onclick="Up('up')">up</text>
<text x="10" y="85" style="font-size:15px; font-weight:bold; "
onclick="Up('down')">down</text>
<text x="10" y="115" style="font-size:15px; font-weight:bold; "
onclick="Up('Right')">Right</text>
<text x="10" y="145" style="font-size:15px; font-weight:bold; "
onclick="Up('left')">left</text>


<g id="to-be-updated" >
<circle cx="300" cy="400" r="80" style="font-
size:l4px ;stroke:black" />
<circle cx="50" cy="400" r="80" style="font-
size:l4px ;stroke:black" />
</g>

</svg>

Store you current translate value or retrieve it from transform attribute and actualize it ...

Something as

tran_x = 0
tran_y = 0

function Up(dir){
switch(dir)
{
case "up" :
tran_y -= 100;
break
case "down" :
tran_y += 100;
break
case "right" :
tran_x += 100;
break
case "left" :
tran_x -= 100;
break
}
SVGRoot.setAttribute('transform','translate(' + tran_x + ',' + tran_y + ')');
}

Michel

thanks

problem solved

ab