How to correctly lay out an element with complex positioning?

Question

css

Good afternoon.
This is the element I need to make a


background image with buildings. I thought to put svg on top. But in this case, the Green elements cannot be positioned relative to the selected boxes. Amy elements should be separate divs (will be animated later).

The difficulty lies in what needs to be done so that when scaling the screen, nothing flies off.
I will be glad for any help.

Here is what is now. An svg element with windows is superimposed on the picture. https://pateder.ru/minsk/
When resizing, everything is OK, but you can't put a div inside the path and this is a problem.

Answer 1

Convert or request the source of the entire image, convert pins to a symbol and operate on the basis of SVG without these crutches. SVG scales proportionally on its own unless you tweak it with attributes. Animation on SMIL can be implemented.

Answer 2

Hang divas on absolutes with percentage positioning

Answer 3

rightly said - green elements are absolute to the image container, what will be there, a picture or svg
as an example - hint