title: JavaScript SVG Zoom moves the SVG
body: <p>I've written this code for my SVG, when the user scrolls, the svg zooms in/zooms out.</p>
  
  <pre><code>    svgRootNode.addEventListener('wheel', function (e) {
          let transformationMatrix = this.getAttribute("transform").replace("matrix(", "").replace(")", "").trim().split(" ");
  
          let deltaZoom = e.wheelDelta / 1800;
  
          transformationMatrix[0] = Number(transformationMatrix[0]) + deltaZoom;
          transformationMatrix[3] = Number(transformationMatrix[3]) + deltaZoom;
  
          if (transformationMatrix[0] &lt;= 0) {
              transformationMatrix[0] = 0.05;
          }
  
          if (transformationMatrix[3] &lt;= 0) {
              transformationMatrix[3] = 0.05;
          }
  
  
  
          this.setAttribute("transform", "matrix(" + transformationMatrix.join(" ") + ")");
      });
  </code></pre>
  
  <p>Here's my SVG Markup:</p>
  
  <pre><code>&lt;svg width="2500" height="240" transform="matrix(1 0 0 1 0 0)"&gt;
      &lt;rect data-id="1" x="20" y="20" width="100" height="100" fill="#03A9F4"&gt;&lt;/rect&gt;
      &lt;circle cx="30" cy="130" r="4" fill="red"&gt;&lt;/circle&gt;
      &lt;circle cx="10" cy="50" r="4" fill="red"&gt;&lt;/circle&gt;
      &lt;text x="70" y="70" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle"&gt;Meeting Room&lt;/text&gt;
      &lt;rect data-id="2" x="140" y="20" width="200" height="100" fill="#8BC34A"&gt;&lt;/rect&gt;
      &lt;circle cx="130" cy="40" r="4" fill="red"&gt;&lt;/circle&gt;
      &lt;text x="240" y="70" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle"&gt;Pantry&lt;/text&gt;
      &lt;rect data-id="3" x="0" y="140" width="500" height="100" fill="#795548"&gt;&lt;/rect&gt;
      &lt;circle cx="250" cy="130" r="4" fill="red"&gt;&lt;/circle&gt;
      &lt;text x="250" y="190" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle"&gt;Workspace&lt;/text&gt;
      &lt;rect data-id="4" x="500" y="140" width="2000" height="100" fill="#000000"&gt;&lt;/rect&gt;
      &lt;circle cx="750" cy="130" r="4" fill="red"&gt;&lt;/circle&gt;
      &lt;text x="1500" y="190" fill="rgb(255, 255, 255)" font-family="Verdana" font-size="12" text-anchor="middle" dominant-baseline="middle"&gt;Workspace 2&lt;/text&gt;
      &lt;circle cx="10" cy="130" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="130" cy="130" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="340" cy="130" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="130" cy="10" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="30" cy="130" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="130" cy="40" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="250" cy="130" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="10" cy="10" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;circle cx="10" cy="50" r="2" fill="black"&gt;&lt;/circle&gt;
      &lt;line x1="30" y1="120" x2="30" y2="130" stroke="green"&gt;&lt;/line&gt;
      &lt;line x1="30" y1="130" x2="130" y2="130" stroke="green"&gt;&lt;/line&gt;
      &lt;line x1="130" y1="130" x2="130" y2="40" stroke="green"&gt;&lt;/line&gt;
      &lt;line x1="130" y1="40" x2="140" y2="40" stroke="green"&gt;&lt;/line&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>Before I scroll, it looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/LSB6K.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LSB6K.png" alt="enter image description here"></a></p>
  
  <p>After I zoom-out using scroll, it becomes this way. It leaves a while gap. How do I prevent that gap?</p>
  
  <p><a href="https://i.stack.imgur.com/Fmztv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Fmztv.png" alt="1"></a></p>