title: How to get the click coordinates relative to SVG element holding the onclick listener?
body: <p>I haven't been able to calculate the click coordinates (x and y) relative to the element triggering the event. I have not found an easy example online.</p>
  
  <p>I have a simple <code>svg</code> (with 100px left margin) in an HTML page. It contains a <code>group</code> (translated 30px 30px) which has an <code>onclick</code> listener attached. And inside that <code>group</code> I have a <code>rect</code> with 50px width and height.</p>
  
  <p>After I click any part of the <code>group</code> element, I get an event object with coordinates relative to the HTML page (<code>evt.clientX</code> and <code>evt.clientY</code>). </p>
  
  <p>What I need to know is where exactly the user clicked inside the <code>group</code> element (the element holding the onclick listener).</p>
  
  <p>How do I convert <code>clientX</code> and <code>clientY</code> coordinates to the <code>group</code> element coordinates. So say, if I click the top leftmost part of the <code>rect</code> it should give me x=0 and y=0.</p>
  
  <p>Here is currently what I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              body{
                  background:black;
              }
              svg{
                  fill:white;
                  background:white;
                  position: absolute;
                  top:100px;
                  left:100px;
              }
              
          &lt;/style&gt;
          &lt;script&gt;
              function clicked(evt){
                  alert("x: "+evt.clientX+" y:"+evt.clientY);
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"&gt;
                  &lt;g transform="translate(30 30)" onclick="clicked(evt)"&gt;
                      &lt;rect x="0" y="0" width="50" height="50" fill="red"/&gt;
                  &lt;/g&gt;
              &lt;/svg&gt;      
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>