SVG image click event mystery

[vividryden]

I've made a repo here where you can see the code: https://github.com/outragedpinkracoon/dice_roller

My app displays some images of dice, and when you click them it shows the result. However, the click event only registers once on the dice, or in some parts of the image not at all.

Can you see where I have gone wrong?

[_Attila_ · Accepted solution]

The "result" label seems to create a mask that extends above and to the right of the displayed text.

This area overlaps some of the dice and these cannot be clicked. This seems to be a bug.

If you move the result label between "dice_tray" and "d4, it will work.

[vividryden]

Thank you so much!

[vividryden]

For reference, I had to move the 'result' text tag up before the listing of the 'image' tags.