title: How do you convert screen coordinates to document space in a scaled SVG?
body: <p>I'm using the svg jquery plugin by Keith Wood, not the HTML5 canvas.</p>
  
  <p>I define my svg image like this to scale my svg triangle image to fit its div container:</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;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" viewBox="0 0 299 215" &gt;
      &lt;g&gt;
      &lt;polygon points="1,1 299,1 149,210" fill="blue" stroke="blue" stroke-width="0" class="votenow"/&gt;
      &lt;/g&gt;
      &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But how do I then match the coordinate systems?</p>
  
  <p>I want to capture the mouse location at some point over the triangle and draw a circle at those X Y coordinates, but the circle gets drawn in a different location because the coordinate systems don't match.</p>
  
  <p>So a circle would be drawn at point 10,10 but appear to be at 50,60 for example.</p>
  
  <p>How do people cope with this?</p>
  
  <p>Thanks.</p>
  
  <p>Final Solution: Using the JQuery plugin to draw the circle and getScreenCTM() to calculate the points. </p>
  
  <p>Perhaps I no longer require the JQuery plugin but it will do for now. Couldn't see how to do it using only the plugin.</p>
  
  <pre><code>$('#cvtriangle .tri').on( "click", function(e) {
      jqsvg = $('#cvtriangle').svg('get');
      svg = document.querySelector("svg");
      var pt = svg.createSVGPoint();
      pt.x = e.clientX;
      pt.y = e.clientY;
      pt = pt.matrixTransform(svg.getScreenCTM().inverse());
      jqsvg.circle(pt.x, pt.y, 5, {class: 'vote', fill: 'white', stroke: 'white', strokeWidth: 2, cursor: 'pointer'});
  });
  </code></pre>