How to overlay a map on a SVG?

I'm developing a Laravel app using bootstrap and I have the following problem:

I need to put in top of a card 3 different layers, from back to front:

A jpg responsive image, which fits to the card width.
svg code (it can't be a svg image because it is dynamic and must be changed every time the user modifies an information).
a map with coordenates, and the user must be able to click on them. These coords are referred to the background jpg.

The problem is that I can't click in the coords over the svg, so I've tried putting a transparent image with the map in top of the svg. Then you can click in areas, but it is not responsive, and the map does not fit to the jpg size.

I hope i have explained correctly my situation.

Thanks!!

Solution

If I am getting this right, i would suggest to put everything into a single svg. Images can be included with a <image> tag, text is supported as well. One benefit would be, that there is only one coordinate space for the graphic. All the scaling etc. will the browser do, so all you need to about is the »local svg coordinate space«.

But by the way, probaly this css:

svg {
  pointer-events: none;
}

will do what you need…