svgtry.html

<script src="jquery-1.8.0.min.js"></script>

<!--
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" 
 width="1024px" height="600px" viewbox="-512 -300 1024 600">
 <g id="g">
  <text x="-400" y="0" fill="black" style="font-size:015">-400</text>
  <text x="-300" y="0" fill="black" style="font-size:15">-300</text>
  <text x="-200" y="0" fill="black" style="font-size:15">-200</text>
  <text x="-100" y="0" fill="black" style="font-size:15">-100</text>
  <text x="0" y="0" fill="black" style="font-size:15">0</text>
  <text x="100" y="0" fill="black" style="font-size:15">100</text>
  <text x="200" y="0" fill="black" style="font-size:15">200</text>
  <text x="300" y="0" fill="black" style="font-size:15">300</text>
  <text x="400" y="0" fill="black" style="font-size:15">400</text>
 </g>
</svg>
-->

<script language="javascript">

// the SVG file and its graphics content
svg = document.getElementById("svg");
g = document.getElementById("g");

// the initial values
var is_zooming = 0;
var is_moving = 0;
var mouse_down = 0;
// the initial view is [-512,+512]
// large values of zoom = zooming in
var zoom = 1;
var xcenter = 0;
var zoomfactor = 1.03;
var mousex;

// bindings (should these be on the SVG instead of the document?)
$(document).mousedown(
		      function(e) {
			mouse_down = 1;
			if (e.shiftKey) {shiftmousedown(e);}
			else if (e.ctrlKey) {ctrlmousedown(e);}
			else {mousedown(e);}
		      })
$(document).mouseup(mouseup)
$(document).mousemove(
		      function(e) {
			if (mouse_down) {
			  mousemove(e);
			    }
		      }
		      );

// recenter/scale the document when any change is made
// (doesn't actually redraw, the SVG handles that)
function redraw() {
  //  var str = "translate(" + -xcenter + ",0) scale(" + zoom +",1)";

  // below is either zoom x only or zoom both
  var str = "translate(" + -xcenter*zoom + ",0) scale(" + zoom +","+1+")";
//  var str = "translate(" + -xcenter*zoom + ",0) scale(" + zoom +","+zoom+")";

  // WRONG: var str = "scale(" + zoom +",1) translate("+ -xcenter*zoom + ",0)";
  g.setAttribute("transform",str);
}

function mousemove(e) {
  xcenter = oldcenter - (e.pageX-oldmouse)/zoom;
  redraw();
}

function shiftmousedown() {
 is_zooming = 1;
 holdzoom(zoomfactor);
}

// when mouse button pressed...
function mousedown(e) {
 is_moving = 1;

 // record the current xcenter and mouse position for mousemove()
 oldcenter = xcenter;
 // <h>this old mouse...</h>
 oldmouse = e.pageX;
}

function ctrlmousedown(e) {
 is_zooming = 1;
 holdzoom(1./zoomfactor);
}

function mouseup(e) {
  is_zooming = 0;
  is_moving = 0;
  mouse_down = 0;
  redraw();
  //  alert("Z:"+zoom+", XC:"+xcenter);
}

// keep zooming by zf
function holdzoom(zf) {
  if (is_zooming) {
    zoom=zoom*zf;
    redraw();
    setTimeout("holdzoom("+zf+")", 1);
  }
}

</script>