mouse actions for SVG in HTML

Question

If I embed an SVG into a HTML page, then users can click on words in the SVG (that are included as text).

Is it possible (via JavaScript or similar) to find out which text element a user clicked on?

So e.g. if I have something like

<text class='f53' x='393.439815' y='162.22991'>EA</text>

to determine if the user clicked on this?

Answer 1

you can determine on which element the action was performed like this:

const svg = document.querySelectorAll(".svg ");
svg.addEventListener('click', e => {
   if(e.target.classList.contains("f53")) {
    ...
   }
});