当 window 调整大小时，如何使链接保持相对于背景图像的位置？

Question

我想创建一张带有不同国家/地区可点击按钮的地图。我已经在 https://codepen.io/DigitalDesigner/pen/vYpXvZb 上设置了一个测试，我已经尝试过绝对定位，但这会导致 link 离开所需的位置。

如何在 window 展开和收缩时让 link 保持原位？

.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>

Answer 1

绝对位置是相对于最近的定位元素。在这种情况下，您可以删除 links 元素或调整其大小以匹配地图，然后在 link 元素的父元素上设置相对定位。

请注意，我已使用填充将地图元素的高度设置为图像的纵横比 (593/606)，并且我将 link 向上和向左移动了它们的 50%大小使它们在位置上居中。后者解决了由于 link 尺寸相对于图像尺寸造成的明显移动。

.map {
  position: relative;
  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;
  padding-bottom: 97.85%; /* image width / height */
}

.link {
  position: absolute;
  transform: translate(-50%, -50%); /* center the element on the position */
  text-decoration: none;
  font-family: Arial, sans-serif;
  color: maroon;
}

<section class="europe-map">
  <div class="map-container">
    <div class="map">
      <a class="link" href="#" style="left:11.4%; top:13.5%;">Iceland</a>
    </div>
  </div>
</section>

Answer 2

一个解决方案——也许是最可靠的——是将地图和链接合并到它们自己的 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>

当 window 调整大小时，如何使链接保持相对于背景图像的位置？

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

javascript

html

css

svg