title: SVG Pan and Zoom not working
body: <p>Trying to carry out this svg pan and zoom for two rectangles, I can't seem to get it to work. Really new at this but I was able to come up with this but it just doesn't seem to work . I have added my javascript code as well if anyone can seem t find what is wrong, i Used the group id for the elements to try to pan and zoom based on my js but it doesn't still work</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
        &lt;head&gt;
  
       &lt;/head&gt;
        &lt;body&gt;
  
        &lt;svg  width="24cm" height="16cm" viewBox="-4 -1 26 20" 
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  
  
         &lt;g id="myfield" transform="scale(1,1) translate(0,0)" &gt;
  
  
            &lt;g transform=" scale(1,-1) translate(0,-16)"&gt;&lt;g id="togglefield"&gt;
             &lt;rect id= "rectangle1" class= "rectangles" x= 2  y= 0  width= 4  height= 6  onClick="fieldDetails(event)"&gt;&lt;/rect&gt;
  
         &lt;rect  id="rectangle2" class= "rectangles" x= 2  y= 6  width= 4  
           height= 5 onClick="fieldDetails(event)"&gt;&lt;/rect&gt;
  
       &lt;/g&gt;
       &lt;g id="togglefind"&gt;
       &lt;circle class="circles" id="find1" cx= 4  cy= 1  r="0.2" onClick="findDetails(event)"&gt;&lt;/circle&gt;
         &lt;text class="text" x= 4 y= 1  transform="translate(0 2 ) scale(-1,1) rotate(180)"&gt; 1 &lt;/text&gt;
  
        &lt;circle class="circles" id="find5" cx= 4  cy= 7  r="0.2" onClick="findDetails(event)"&gt;&lt;/circle&gt;
        &lt;text class="text" x= 4 y= 7  transform="translate(0 14 ) scale(-1,1) rotate(180)"&gt; 5 &lt;/text&gt;
  
        &lt;/g&gt;
        &lt;/g&gt;
       &lt;rect x="12.6" y="12.4" width="3" height="3" fill="white" stroke="grey" stroke-width="0.05"/&gt;
        &lt;text x="13" y="13.2" font-family="Arial" font-size="0.6"&gt;Legend&lt;/text&gt;
         &lt;g id="Fieldlgd"&gt;
          &lt;rect x="12.8" y="13.6" width="0.6" height="0.6" fill="none" stroke="green" stroke-width="0.04"/&gt;
           &lt;text x="13.6" y="14" font-family="Georgia" font-size="0.5"&gt;Field ID&lt;/text&gt;
           &lt;text x="13" y="14" font-family="Georgia" font-size="0.5"&gt;1&lt;/text&gt;
             &lt;/g&gt;&lt;g id="Findlgd"&gt;
            &lt;circle cx="13.1" cy="14.7" r="0.12" fill="blue" stroke="red" stroke-width="0.05"/&gt;
           &lt;text x="13.6" y="14.85" font-family="Georgia" font-size="0.5"&gt;Find ID&lt;/text&gt;
            &lt;text x="13.2" y="14.7" font-family="Arial" font-size="0.45"&gt;1&lt;/text&gt;
        &lt;/g&gt;
           &lt;/g&gt;
            &lt;rect x="-4" y="0.3" width="3.2" height="12" fill="white" stroke="black" stroke-width="0" fill-opacity="0.8"/&gt;
         &lt;text x="-4" y="0.8" font-family="San Serif" font-size="3%"&gt;Pan and Zoom &lt;/text&gt;
      &lt;text x="-2.7" y="1.8" font-family="Georgia" font-size="4%"&gt;N&lt;/text&gt;
        &lt;polyline id="panup" onclick="panup_click(evt)" points="-3,2 -2.5,1 -2,2 -2.3,1.9 -2.7,1.9 -3,2" fill="lavender" stroke="cornflowerblue" stroke-width="0.05" fill-opacity="0.6"/&gt;
        &lt;text x="-2.7" y="3.4" font-family="Georgia" font-size="4%"&gt;S&lt;/text&gt;
         &lt;polyline id="pandown" onclick="pandown_click(evt)" points="-3,2.8 -2.5,3.8 -2,2.8 -2.3,2.9 -2.7,2.9 -3,2.8" fill="lavender" stroke="cornflowerblue" stroke-width="0.05" fill-opacity="0.6"/&gt;
        &lt;text x="-3.3" y="2.6" font-family="Georgia" font-size="4%"&gt;W&lt;/text&gt;
         &lt;polyline id="panleft" onclick="panleft_click(evt)" points="-2.7,1.9 -3.7,2.4 -2.7,2.9 -2.8,2.6 -2.8,2.2 -2.7,1.9" fill="lavender" stroke="cornflowerblue" stroke-width="0.05" fill-opacity="0.6"/&gt;
        &lt;text x="-2.1" y="2.6" font-family="Georgia" font-size="4%"&gt;E&lt;/text&gt;
        &lt;polyline id="panright" onclick="panright_click(evt)" points="-2.3,1.9 -1.3,2.4 -2.3,2.9 -2.2,2.6 -2.2,2.2 -2.3,1.9" fill="lavender" stroke="cornflowerblue" stroke-width="0.05" fill-opacity="0.6"/&gt;
        &lt;text x="-2.7" y="2.6" font-family="Georgia" font-size="4%"&gt;C&lt;/text&gt;
         &lt;circle id="recenter" onclick="recenter_click(evt)" cx="-2.5" cy="2.4" r="0.3" fill="lavender" stroke="cornflowerblue" stroke-width="0.05" fill-opacity="0.6"/&gt;
      &lt;polyline id="zoomcross" points="-2.6,4.2 -2.4,4.2 -2.4,4.6 -2.1,4.6 -2.1,4.8 -2.4,4.8 -2.4,5.3 -2.6,5.3 -2.6,4.8 -2.9,4.8 -2.9,4.6 -2.6,4.6 -2.6,4.2" fill="cornflowerblue"/&gt;
     &lt;rect id="zoomIn" onclick="zoomin_click(evt)" x="-3" y="4" width="1" height="1.5" fill="white" stroke="black" stroke-width="0.05" opacity="0.2"/&gt;
    &lt;rect id="zoomdash" x="-2.9" y="5.9" width="0.8" height="0.2" 
     fill="cornflowerblue"/&gt;
     &lt;rect id="zoomOut" onclick="zoomout_click(evt)" x="-3" y="5.7" width="1" height="0.6" fill="white" stroke="black" stroke-width="0.05" opacity="0.2"/&gt;
  
  &lt;/svg&gt;
  
  
  
  // Pan left function  
  function panleft_click(evt) {
  var root = document.documentElement;  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
    var goIn = evt.target;  // thus line is currently not used
  
    // Fetch the current transform state of the group element into a 
    var matrix = myfield.getCTM();
    // Read the translate attributes from the matrix into variable x and y
    // Below is the desired leftward change
    var x = (matrix.e + 2) / matrix.a  ; // Divide change by current scale to remove exponential movement
    var y = matrix.f  / matrix.a ;  // To keep motion only along one axis
    // Set the new transform attribute for the group
    myfield.setAttributeNS(null,"transform", "scale(" + matrix.a + "," + matrix.d + ") translate(" + x + "," + y + ")");
  
  }
  
  // Pan right function  
  function panright_click(evt) {
  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
    var goIn = evt.target;  // thus line is currently not used
  
    // Fetch the current transform state of the group element into a matrix
    var matrix = myfield.getCTM();
    // Read the translate attributes from the matrix into variable x and y
    // Below is the desired rightward change
    var x = (matrix.e - 2) / matrix.a;   // Divide change by current scale to remove exponential movement
    var y = matrix.f  / matrix.a;      // To keep motion only along one axis
    // Set the new transform attribute for the group
    myfield.setAttributeNS(null,"transform", "scale(" + matrix.a + "," + matrix.d + ") translate(" + x + "," + y + ")");
  
  }
  
  // Pan up function  
  function panup_click(evt) {
  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
    var goIn = evt.target;  // thus line is currently not used
  
    // Fetch the current transform state of the group element into a matrix
    var matrix = myfield.getCTM();
    // Read the translate attributes from the matrix into variable x and y
    var x = matrix.e / matrix.a ;     // Divided by scale to keep motion only along one axis
  
    // Below is the desired upward change
    var y = (matrix.f + 2) / matrix.a;   // Divide change by current scale to remove exponential movement
    // Set the new transform attribute for the group
    myfield.setAttributeNS(null,"transform", "scale(" + matrix.a + "," + matrix.d + ") translate(" + x + "," + y + ")");
  
  }
  
  // Pan down function  
  function pandown_click(evt) {
  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
    var goIn = evt.target;  // thus line is currently not used
  
    // Fetch the current transform state of the group element into a matrix
    var matrix = myfield.getCTM();
    // Read the translate attributes from the matrix into variable x and y
    var x = matrix.e / matrix.a;   // Divided by scale to keep motion only along one axis
  
    // Below is the desired downward change
    var y = (matrix.f - 2) / matrix.a;   // Divide change by current scale to remove exponential movement
    // Set the new transform attribute for the group
    myfield.setAttributeNS(null,"transform", "scale(" + matrix.a + "," + matrix.d + ") translate(" + x + "," + y + ")");
  
  }
  
     // Zoom in (enlarge) function 
     function zoomin_click(evt) {
  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
        var goIn = evt.target;  // thus line is currently not used
    // Fetch the current transform state of the group element into a matrix
    var matrix = myfield.getCTM();
    // Read the scale attributes from the matrix into variable x and y
    // then apply an increment by multiplying
        var x = matrix.a * 1.2;
        var y = matrix.d * 1.2;
  
      // Set the new transform attribute for the group
      myfield.setAttributeNS(null,"transform", "scale(" + x + "," + y + ") translate(" + matrix.e + "," + matrix.f + ")");
  
  }
     // Zoom out (reduce) function 
     function zoomout_click(evt) {
  
             // variable to get the group transform object
      var myfield  = null;
      myfield  = document.getElementById("myfield");
  
              // Incase the group has no Id then get the first '&lt;g&gt;' element
      if(myfield  === null)   
              myfield  = document.getElementsByTagName('g')[0];
  
        var goIn = evt.target;  // thus line is currently not used
    // Fetch the current transform state of the group element into a matrix
    var matrix = myfield.getCTM();
    // Read the scale attributes from the matrix into variable x and y
    // then apply a reduction in scale by dividing
        var x = matrix.a / 1.2;
        var y = matrix.d / 1.2;
  
      // Set the new transform attribute for the group
      myfield.setAttributeNS(null,"transform", "scale(" + x + "," + y + ") translate(" + matrix.e + "," + matrix.f + ")");
  
  }
     // Recenter/reset function 
     function recenter_click(evt) {
  
      // Reset the group to the original transform
      document.getElementById("myfield").setAttributeNS(null,"transform", "scale(1,1) translate(0,0)");  
  }
  </code></pre>