XML Elves
<community>of XML and SVG Developers</community>
panning svg problem
This is a discussion on panning svg problem within the SVG Questions forums, part of the SVG Forums category; hi the following code aloows user to pan the group of objects up ,down ,right and left but one action ...
| |||||||
| Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read |
07-11-2005, 08:41 AM
| |||
| |||
 panning svg problem 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>
     |
|
07-11-2005, 09:11 AM
| |||
| |||
| panning svg problem
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 |
Linear Mode
