'How can I get coordinates of an SVG by clicking on some point?

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:

  • 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?

  • 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?)

This is what I have tried as I have done before with click events from other components:

<rect [attr.x]="esquina_cuadriculaX" [attr.y]="esquina_cuadriculaY" [attr.width] = "ancho_cuadricula" 
[attr.height] = "alto_cuadricula" fill="none" 
stroke="black" stroke-width="350" [attr.onclick]="clicked($event)" />

And on the TypeScript file I have the function itself:

  clicked($event :any){
    console.log("x: "+$event.clientX+" y:"+$event.clientY);
}

But I get the error "Property '$event' does not exist on type 'GraficaComponent'." where GraficaComponent is of course my component.

Any help is appreciated.

javascripthtmlangularsvgonclick


Solution 1:[1]

try binding your event-handler like this (use round parathesis an correct event name 'click'):

<rect [attr.x]="esquina_cuadriculaX" [attr.y]="esquina_cuadriculaY" [width] = "ancho_cuadricula" 
[height] = "alto_cuadricula" fill="none" 
stroke="black" stroke-width="350" (click)="clicked($event)" />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Felix Kahmann

Related Questions