Can you force a nested svg element to not be cut by other svg elements that are after it in the stacking order

enter image description here

It’s an svg map of countries and some of them you can click and a popup appears. With javascript I’m adding a svg element centered pins to the respective element country yet as you can see from the image, it gets cut by other countries. That is because there are other countries below the current one in the svg file – the stacking order.

Alas I’d hope for an easy way to force them to be on top of every country or perhaps it’s more complicated?