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

Question

[chelnokov_a]

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


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

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

Вот то, что есть сейчас. На картинку наложен svg элемент с окнами. https://pateder.ru/minsk/
При изменение размеров все ок, но внутрь path нельзя положить div и это проблема.

Answer 1

[Арсений Матыцин]

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

Answer 2

[Pashok Doom]

Повесь дивы на абсолютах с процентным позиционированием

Comments

[fallus]

Да.
Я бы все эти дивы абсолютными сделал, но по центру:

left: 50%;
top: 50%;
transform: translate(-50%, -50%)

И уже transform: translate бы у каждого индивидуально настраивал.

Answer 3

[lagudal]

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