Как ускорить разработку интерактивной схемы зала?

Question

[JackShcherbakov]

Здравствуйте!

Задача

В общем на сайте есть SVG-схема большого театра. Ее нужно сделать интерактивной. При наведении должны показываться цены и все элементы сектора, над которым находится курсор, должны подсветиться.

Проблема

Но проблема в том, что в этой схеме более 2000 элементов. Я через цикл каждому дал id и начал через консоль вылавливать каждый элемент и добавлять его в массив, но понял, что такими темпами, я эту схему буду делать месяц.

Вопрос

Есть ли какой-то способ решить мою проблему и сделать все быстро? Может быть есть программа, в которой можно как-то сгруппировать нужные элементы для обработки. Например, было бы неплохо иметь программу, в которой можно было бы обводить элементы, и им присваивался бы определенный класс. Таким образом я бы все сделал за 10 минут.

Заранее выражаю огромную благодарность всем, кто поможет!

Answer 1

[lagudal]

чтобы класс присваивать графической программой - не встречал.
Иллюстратор дает малопригодные имена id - например, что то вроде #SVGID_76_ .
Я делал таким образом.
Элементы, которые предполагалось будут иметь общее поведение, объединял в группы - в иллюстраторе еще. Чаще всего нельзя все элементы с одним поведением включить в одну группу, поэтому таких групп создаю столько, сколько это необходимо по-минимуму.
Тут же в ручную в иллюстраторе добавляю уникальные но однокоренные имена для этих групп - эти имена будут id этих групп в svg.
После сохранения svg открываю его например в notepad ++, простой регуляркой по Поиск-замена всем нужным группам с заданными id добавляю класс, который и будет основным для поведения выбранных групп.
Таким образом делаю столько классов, сколько нужно, этим классам уже задаю стили, анимацию и тд. Может не так чтобы очень быстро, но все равно легче, чем вручную по каждому элементу или даже группе проходить...

Comments

[Moskus]

В Inkscape XML-редактор и панель XML-свойств элементов - встроенные.
И для решения задачи каждому элементу присваивать свойства не нужно - есть же группы.

Answer 2

[Юрий]

Можно попробовать через иллюстратор. Если не ошибаюсь, он при экспорте присваивает каждому объекту id, соответствующий названию слоя (или оборачивает элементы одного слоя в < g > с id = название слоя).

Answer 3

[Moskus]

Вам нужен Inkscape. В нём вам нужно нарисовать невидимыми линиями контуры секторов и объединить их в группы с видимыми элементами схемы сектора.
См. мои ответы на эти вопросы: В каком svg редакторе, можно править код, во время работы? - про редактирование XML SVG, Как обеспечить интерактивность SVG с промежутками между элементами? - это вообще ваш вопрос, весьма близкий, про саму организацию схемы.