<script type="text/ecmascript">
  <![CDATA[
    addEventListener('DOMMouseScroll', wheel, false);
    onmousewheel = wheel;
    var svgEl = document.getElementById("topsvg");
    var startx=0;
    var starty=0;
    function wheel(evt){
      evt = evt ? evt : window.event;
      var normal = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40;
      var vb = new Array(4);
      var vbtext = svgEl.getAttributeNS(null,"viewBox");
      vb = vbtext.split(" ");
      var zoom = (normal<0)? 1.41 : 0.71;
      //var dwidth = parseFloat(Math.max(vb[2],vb[3])) * (1-zoom);
      vb[0] = parseFloat(vb[0]) + parseFloat(vb[2])*(1-zoom) * evt.clientX/innerWidth;
      vb[1] = parseFloat(vb[1]) + parseFloat(vb[3])*(1-zoom) * evt.clientY/innerHeight;
      vb[2] = parseFloat(vb[2]) * zoom;
      vb[3] = parseFloat(vb[3]) * zoom;
      svgEl.setAttributeNS(null, "viewBox", vb.join(" "));
      if (evt.preventDefault)
        evt.preventDefault(); // Don't scroll the page when zooming
    }
    onmousedown = function(evt) {
      startx = evt.clientX;
      starty = evt.clientY;
    }
    onmousemove=function(evt) {
      if(startx!=0 && starty!=0 
        && ((evt.clientX - startx)*(evt.clientX - startx)+(evt.clientY - starty)*(evt.clientY - starty)>100))
      {
        var vbtext = svgEl.getAttributeNS(null,"viewBox");
        vb = vbtext.split(" ");
        var maxwh = Math.max(parseFloat(vb[2]),parseFloat(vb[3]));
        vb[0] = parseFloat(vb[0]) - (evt.clientX - startx)*maxwh/innerWidth;
        vb[1] = parseFloat(vb[1]) - (evt.clientY - starty)*maxwh/innerHeight;
        svgEl.setAttributeNS(null, "viewBox", vb.join(" "));
        startx = evt.clientX;
        starty = evt.clientY;
      }
    } 
    onmouseup=function() {
      startx=0;
      starty=0;
    }
    ondblclick=function() {
      location.reload();
    }
  ]]>
</script>