J
J
JackShcherbakov2018-09-08 07:34:39
Web development
JackShcherbakov, 2018-09-08 07:34:39

How to speed up the development of an interactive floor plan?

Hello!
Task
In general, the site has an SVG-scheme of a large theater. It needs to be made interactive. When hovering, prices should be displayed and all elements of the sector over which the cursor is located should be highlighted.
5b93516f82ca5161907088.jpegProblem
But the problem is that there are more than 2000 elements in this circuit. I gave everyone an id through a loop and started catching each element through the console and adding it to the array, but I realized that at such a pace, I would be doing this scheme for a month.
Question
Is there any way to solve my problem and get it done quickly? Maybe there is a program in which you can somehow group the necessary elements for processing. For example, it would be nice to have a program that could wrap around elements and assign a class to them. So I would do everything in 10 minutes.
Thanks in advance to everyone who helps!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
L
lagudal, 2018-09-08
@JackShcherbakov

to assign a class to a graphic program - did not meet.
Illustrator gives unusable id names - for example, something like #SVGID_76_ .
I did it this way.
Elements that were supposed to have a common behavior were combined into groups - in the illustrator yet. Most often, it is impossible to include all elements with the same behavior in one group, so I create as many such groups as necessary at a minimum.
Immediately, manually in illustrator, I add unique but single-root names for these groups - these names will be the id of these groups in svg.
After saving the svg, I open it, for example, in notepad ++, with a simple regular search for all the necessary groups with the given id, I add a class that will be the main one for the behavior of the selected groups.
Thus, I make as many classes as needed, I already set styles, animations, and so on for these classes. Maybe not so fast, but still easier than manually going through each element or even a group...

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question