title: Mouse position inside autoscaled SVG
body: <p>I am experiencing troubles concerning the position of mouse cursor inside my SVG document. I'd like to design a potentiometer that will follow the cursor when dragged, using <strong>JavaScript</strong> in an HTML page.</p>
  <p>I tried <code>evt.clientX/Y</code> and <code>evt.screenX/Y</code> but as my SVG is in <strong>autoscale</strong>, coordinates inside my SVG are different. I have been searching for an answer for days now but I couldn't find any solution (either knowing my SVG rescaling factor in real time or have a function for mouse location in SVG coordinates system).</p>
  <p>The rotation will follow a simple rule:</p>
  <pre><code>if (evt.screenX &lt; xc)
    ang = Math.atan((evt.screenY - yc) / (evt.screenX - xc)) * 360/(2*Math.PI) - 90;  
  
  if (evt.screenX &gt; xc)
    ang = Math.atan((evt.screenY - yc) / (evt.screenX - xc)) * 360/(2*Math.PI) + 90;  
  </code></pre>
  <p>With <code>(xc;yc)</code> as center of rotation and replacing all <code>evt.screenX/Y</code> by the coordinates of the mouse inside my SVG.</p>