What is the best way to select areas in an image using the area type?

Question

Layout

I have a picture, it has a building and when you hover over a separate floor, I need to highlight it. The backlight is a separate piece of this floor, which is simply superimposed on with the help of positioning. But the problem is that the floors are not even, in the picture the building seems to be in profile.
I thought in the direction of svg , but our designers do not have the opportunity to redraw the highlighted areas, because don't know svg and don't have an illustrator to learn it! I tried to translate these pictures myself into svg , but I didn't get what I wanted, as I thought. The code in the svg was not what we needed! My picture was encoded in the tag!
map with its areait turned out to be very difficult for me, but no matter how I tried to do it, the browser does not want to highlight the area tag for me if I hover over the node in the console, which made debugging very difficult.

Answer 1

Answer 2

When I did not know how to work with SVG, I used this resource for a similar task . Load the image and draw the floor areas on top of it. As a result, you get the generated map area code.
But such things are better done through SVG.
For SVG there is onlineThere is an online editor . Do the same, load the image, create a new layer and draw areas on it. True, I personally did not use it.
It's easier to do this in illustrator.

Answer 3

Why do you need Illustrator ??? To learn SVG , a simple text editor, browser, reference , and specification is enough .
As a last resort, there is Inscape .
You can see notes and useful links on the site of Yulia Bukhvalova .
As for the skew, you can transform both the resulting flat SVG and the shapes inside it.
And with area you will not succeed.

Answer 4

I would cover the image with a transparent canvas and paint over areas on it :)