@chelnokov_a

Как правильно сверстать элемент со сложным позиционирование?

Добрый день.
Вот такую элемент мне надо сверстать
5f58de894c6da589370423.jpeg

Фоновое изображение со зданиями. Думал сверху svg наложить. Но в таком случае Зеленые элементы не могу спозиционировать относительно выделеных окошек. Эми элементы должны быть отдельным дивами (будет анимация потом).

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

Вот то, что есть сейчас. На картинку наложен svg элемент с окнами. https://pateder.ru/minsk/
При изменение размеров все ок, но внутрь path нельзя положить div и это проблема.
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Преобразуй или запроси исходник всего изображения, конвертируй пины в символ и оперируй на базе SVG без вот этих костылей. SVG масштабируется пропорционально само по себе, если не докрутить атрибутами. Анимацию на SMIL можно будет реализовать.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Benzin102
@Benzin102
Shitcoder
Повесь дивы на абсолютах с процентным позиционированием
Ответ написан
@lagudal
правильно сказали - зеленые элементы абсолютом к контейнеру изображения, что там будет, картинка или svg
как пример - подсказка
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы