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.
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)" />