How can I make links maintain position relative to the background image when window resizes?

Issue

I am wanting to create a map with clickable buttons over the different countries. I have setup a test on https://codepen.io/DigitalDesigner/pen/vYpXvZb I have tried absolute positioning but that causes the link to move off the desired spot.

How can I make the link stay in place when the window expands and contracts?

.europe-map {
  
}
.map-container {
  width:100%;
  height:604px;
}
@media screen and (min-width:768px) {
  .map-container {
    height:727px;
  }
}
.map {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg);
      background-size: 100%;
      background-repeat: no-repeat;
  background-position: left top;
      height:100%;
} 
.links {
  
}
.link {
  
}

<section class="europe-map">
  <div class="map-container">
    <div class="map">
      
    <div class="links">
      <a class="link" href="#" style="position:absolute;left:10%;top:20%;">Test</a>
    </div>
    </div>
  </div>
</section>

Solution

One solution - perhaps the most reliable - is to merge the map and the links into their own SVG.

.map-container {
  width: 100%;
  height: 604px;
}

@media screen and (min-width:768px) {
  .map-container {
    height: 727px;
  }
}

.link {
  font-size: 10px;
  text-decoration: underline;
  fill: blue;
}

<section class="europe-map">
  <div class="map-container">
    <svg viewBox="0 0 593 606" class="map">
       <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/66/Blank_map_of_Europe_cropped.svg"/>
       <a class="link" xlink:href="#"> <text x="10%" y="14%">Test</text> </a>
    </svg>
  </div>
</section>

Answered By - Paul LeBeau