How to set borders over an image using SVG?

Question

JavaScript

Hello. Now I'm studying SNAP.SVG, everything seems to be clear, but I still have questions.
How can Path be positioned on top of an image?
How are these guys implemented with such precision?
Here is a link to them.
Their site uses the Raphael library, but Raphael is outdated. The creators of the Rafal library have created a new, faster, and more functional library called SNAP.SVG .
So here I am using it.
These guys, they put buildings on the background, and then, as far as I understand, with the help of path they realized the illusion of choosing by floors. Since you can select floors, you can see, feel if you point (as shown in my screenshot).
The question is, how can I implement this with SNAP.SVG ?
And yet, how did they achieve such accuracy that when you change the screen size, everything remains in place? Yes, I know that there is such a thing as adaptability, but still.
Please help me, I will be very grateful!!
Thank you!

Answer 1

And you know, it's strange, it's strange that no one will answer me. I understand that people do not need all this (SVG and other libraries).

They don’t give answers to your questions because you can’t formulate the question normally, and you’ll guess what kind of borders you are talking about.
All it takes is to draw the svg path in the right places. Somehow so . And note - it works without any editors, rafaels, snaps and other magic.
If you are wondering where I got the coordinates for path - open the console and click on the picture .

How did they achieve such precision that when the screen size changes, everything stays in place?

Actually the incomprehensible part. What's wrong with precision? Or do you think objects should move on their own each time?
And yes, I don’t know how to do this with snap.svg or raphael, or more precisely, I don’t know why they should be used at all for such a simple task.