Как я могу заставить ссылки сохранять положение относительно фонового изображения при изменении размера окна?

Я хочу создать карту с интерактивными кнопками в разных странах. Я настроил тест на https://codepen.io/DigitalDesigner/pen/vYpXvZb. Я попробовал абсолютное позиционирование, но это приводит к тому, что ссылка смещается с нужного места.

Как я могу сделать так, чтобы ссылка оставалась на месте, когда окно расширяется и сжимается?

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

javascript html css svg

22.03.2022 16:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Абсолютная позиция определяется по отношению к ближайшему позиционируемому элементу. В этом случае вы можете либо удалить элемент links, либо изменить его размер в соответствии с картой, а затем установить относительное позиционирование родительского элемента ссылки.

Обратите внимание, что я установил высоту элемента карты в соответствии с соотношением сторон изображения (593/606), используя отступы, и что я смещаю ссылки вверх и оставляю 50% их размера, чтобы центрировать их по положению. Последний разрешает видимое движение из-за размера ссылки относительно размера изображения.

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

22.03.2022 16:42

Ответ принят как подходящий

Одно из решений — пожалуй, самое надежное — объединить карту и ссылки в отдельный 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>

Это действительно приятно. Одна проблема заключается в том, что шрифт становится очень маленьким для размеров мобильных экранов. Возможно, относительные единицы или медиа-запрос были бы хороши.

— 22.03.2022 17:02

22.03.2022 16:51