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
Code:
<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,'+translate+')');
}else if(dir == "down"){
translate=100;
SVGRoot.setAttribute('transform','translate(0,'+translate+')');
}else if(dir == "Right"){
translate=-100;
SVGRoot.setAttribute('transform','translate('+translate+',0)');
}else if(dir == "left"){
translate=100;
SVGRoot.setAttribute('transform','translate('+translate+',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>