Map to svg, how to add text to an element?

Question

css

You need to make a map like this.

It turns out that you need to draw regions, and add a label and text to them, I do it in svg because I need to dynamically change the color on hover and turn off some regions (delete text and label).
What are the options for how to build it? In svg, you can’t make nested elements, but I wanted to break everything into groups, region-> name + label + background of the region itself. Maybe there are better svg options?

Answer 1

You can't nest elements in svg

There are groups for that.
so do what stops https://habrahabr.ru/post/230443/
Better not. There is an analogue, for example canvas, but it will be more difficult, in this task
PS: There are a lot of ready-made examples:
https://codepen.io/tag/svg%20map/
https://habrahabr.ru/post/127994/