title: Scaling SVG with cursor position as transform origin
body: <p>I am trying to scale an SVG cirle with trackpad (by moving two fingers up/down) and the origin of the transform must be the position of the cursor. The scaling performs well for the first time, and for every other attempt the circle changes position (it should not). This can be seen clearly if the cursor is inside the circle and near the perimeter of it. Below is the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8" content="width=device-width"&gt;
  
      &lt;style&gt;
          .container
          {
              position: fixed;
              left: 0;
              right: 0;
              top: 0;
              bottom: 0;
          }
  
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class="container"&gt;
      &lt;svg id="svg" height="600" width="600"&gt;
          &lt;circle cx="300" cy="300" r="300" stroke="black" stroke-width="3" fill="white"/&gt;
      &lt;/svg&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      let scale = 1;
      const e = document.getElementById("svg");
  
      function wheelZoom(event)
      {
          event.preventDefault();
  
          scale += event.deltaY * -0.01;
          scale = Math.min(Math.max(.5, scale), 2);
  
          x = 100*(event.clientX-e.getBoundingClientRect().x)/e.getBoundingClientRect().width;
          y = 100*(event.clientY-e.getBoundingClientRect().y)/e.getBoundingClientRect().height;
  
          e.style.transformOrigin = `${x}% ${y}%`;
          e.style.transform = `scale(${scale})`;
      }
  
      e.addEventListener("wheel", wheelZoom);
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>