title: How do I translate mouse movement distances to SVG coordinate space?
body: <p>I have an SVG visualization of the distribution of CSS4 color keywords in HSL space here: <a href="https://meyerweb.com/eric/css/colors/hsl-dist.html" rel="nofollow noreferrer">https://meyerweb.com/eric/css/colors/hsl-dist.html</a></p>
  
  <p>I recently added zooming via the mouse wheel, and panning via mouse clack-and-drag.  I’m able to convert a point from screen space to SVG coordinate space using <code>matrixTransform</code>, <code>.getScreenCTM()</code>, and <code>.inverse()</code> thanks to example code I found online, but how do I convert mouse movements during dragging? Right now I’m just shifting the <code>viewBox</code> coordinates by the X and Y values from <code>event</code>, which means the image drag is faster than the mouse movement when zoomed in.</p>
  
  <p>As an example, suppose I’m zoomed in on the image and am dragging to pan, and I jerk the mouse leftwards and slightly downwards.  <code>event.movementX</code> returns <code>-37</code> and <code>event.movementY</code> returns <code>6</code>.  How do I determine how far that equates to in SVG coordinates, so that the <code>viewBox</code> coordinates are shifted properly?</p>
  
  <p><em>(<strong>Note:</strong> I’m aware that there are libraries for this sort of thing, but I’m intentionally writing vanilla JS code in order to learn more about both SVG and JS.  So please, don’t post “lol just use library X” and leave it at that.  Thanks!)</em></p>
  
  <p><strong>Edited to add:</strong> I was asked to post code.  Posting the entire JS seems overlong, but this is the function that fires on <code>mousemove</code> events:</p>
  
  <pre><code>function dragger(event) {
      var target = document.getElementById('color-wheel');
      var coords = parseViewBox(target);
      coords.x -= event.movementX;
      coords.y -= event.movementY;
      changeViewBox(target,coords);
  }
  </code></pre>
  
  <p>If more is needed, then view source on the linked page; all the JS is at the top of the page.  Nothing is external except for a file that just contains all the HSL values and color names for the visualization.</p>