title: How can I get coordinates of an SVG by clicking on some point?
body: <p>I am new to SVG and I am trying to generate an event in order to get the coordinates of the click when I click on the SVG. I have multiple questions:</p>
  <ul>
  <li><p>I am using angular and I am not sure if this is possible keeping my function in the TS file or I have to create a  or something. I have also seen that some people use jQuery, but I am not sure what this technology is. It is possible to it in angular?</p>
  </li>
  <li><p>I have tried using the OnClick attribute, from the SVG components, but I would like to know if there is possible to cover al the SVG space (in case this is not possible I may create a rectangle from all the viewbox dimensions with opacity 0?)</p>
  </li>
  </ul>
  <p>This is what I have tried as I have done before with click events from other components:</p>
  <pre><code>&lt;rect [attr.x]=&quot;esquina_cuadriculaX&quot; [attr.y]=&quot;esquina_cuadriculaY&quot; [attr.width] = &quot;ancho_cuadricula&quot; 
  [attr.height] = &quot;alto_cuadricula&quot; fill=&quot;none&quot; 
  stroke=&quot;black&quot; stroke-width=&quot;350&quot; [attr.onclick]=&quot;clicked($event)&quot; /&gt;
  </code></pre>
  <p>And on the TypeScript file I have the function itself:</p>
  <pre><code>  clicked($event :any){
      console.log(&quot;x: &quot;+$event.clientX+&quot; y:&quot;+$event.clientY);
  }
  </code></pre>
  <p>But I get the error &quot;Property '$event' does not exist on type 'GraficaComponent'.&quot; where GraficaComponent is of course my component.</p>
  <p>Any help is appreciated.</p>