Estoy trabajando en un mapa interactivo usando un mapa SVG dividido en varias regiones. Lo que intento es capturar el elemento en el que se hizo clic (elemento de ruta que representa la región) para aplicarle un estilo.
Mi componente angular tiene la siguiente plantilla:
<object type="image/svg+xml" data="/assets/img/regions_map.svg" (click)="handleRegionClick($event)"></object>para el archivo Ts:
export class RegionsMapComponent implements OnInit { constructor() { } ngOnInit() { } /** handle the click on the map*/ handleRegionCLick($event: MouseEvent) { console.log('hello'); } }Pero aquí, hacer clic en el mapa SVG no llama a mi función, por lo que no puedo capturar la identificación de la región en la que se hizo clic para resaltar.
La etiqueta <object> se diseñó originalmente para incrustar complementos del navegador. Más en general, es mejor incrustar una imagen con la etiqueta <img> (que funciona bien con el evento de click ):
<img src="/assets/img/regions_map.svg" (click)="handleRegionClick($event)" />