Как создать интерактивную svg картинку: пример простого svg
Как создать интерактивную svg картинку: пример простого svg
Как создать интерактивную svg картинку? Этим вопросом задаются многие начинающие разработчики, поэтому решил написать урок с созданием простого интерактивного svg плаката. Прежде чем приступить к его разработке, необходимо оптимизировать наше svg изображение (этим мы занимались в прошлой статье). Благодаря проведённой оптимизации мы не только уменьшили размер (вес) svg картинки велосипеда, но и структурировали изображение. Эти действия подготовили svg рисунок к созданию из него интерактивного плаката, который может служить наглядным пособием в образовательных целях (например, в качестве интерактивной презентации для занятий с детьми).
Для работы нам понадобится непосредственно сам svg файл и текстовый редактор с подсветкой кода: Notepad++/Notepadqq, Brackets и др. В качестве картинки я взял схему велосипеда с подписями основных деталей и элементов, из которого он состоит. Оригинальный вариант можно скачать с сайта Википедии.
Давайте создадим интерактивный svg плакат из статичной картинки в виде схемы. Для этого:
- Создадим в svg картинке javascript код.
- Сохраним записи текстовых надписей в массив js скрипта.
- Удалим все подписи со сносками деталей велосипеда из рисунка.
- Маркеры в форме красных кругов преобразуем в интерактивные кнопки.
- При наведении на маркер будем выведем информацию о детали велосипеда в текстовое поле.
Прежде чем удалить все сноски давайте зафиксируем данные в виде массива и перепишем все названия деталей. Например, рама велосипеда подразделяется на верхнюю трубу, нижнюю трубу, подседельную трубу и перья. В этом случае целесообразно заголовок вывести нулевым элементом каждого массива, а входящие детали перечислить следом.
Если не смогли самостоятельно написать массив, то забирайте мой вариант:
var vls=[['Передняя часть:','ручки руля (грипсы)','тормозные ручки и манетки','вынос руля','передние тормоза','аммортизационная вилка'],['Рама:','головная (рулевая) труба','верхняя труба','нижняя труба','подседельная труба','перья'],['Колесо:','спица','втулка','обод колеса','шина','клапан'],['','Седло','Подседельный штырь'],['','Задние тормоза','Кассета и трещотка','Задний переключатель передач','Передний переключатель передач','Цепь','Каретка','Система','Педаль','Шатун (кривошип)']];
После оптимизации группы маркеров удалил всё лишнее (сноски и подписи). Чтобы обработать наведение мышки на маркер и ухода с него, добавим к группе с маркерами события
g id='dots' class='dot' onmouseover='clk(evt)' onmouseout='cls()'.
В функции clk(evt) предлагаю 'отлавливать' идентификатор id каждого маркера, обрабатывать его и по параметрам вызывать из нашего массива соответствующие значения. Пусть каждый наш ID имеет одну латинскую букву и две цифры, разделённые между собой знаком '_' (например, circle id='r0_1' cx='433' cy='438' r='3'). Этот ID мы будем разбирать по алгоритму. Латинские буквы можно назначать по своему усмотрению, у меня они так или иначе связаны с названием группы деталей велосипеда.
Функция cls() в нашей интерактивной svg картинке будет удалять созданную при наведении курсора мышки надпись названия детали и менять её на какой-нибудь другой нейтральный текст.
Чтобы маркеры при наведении курсора мышкой напоминали кнопки, добавим в стиль маркеров запись
cursor:pointer;
После удаления всех сносок и текстовых блоков на интерактивной svg картинке у нас очистится довольно значимое место. Предлагаю увеличить масштаб изображения велосипеда. Чтобы определить границы картинки, создаю технологический слой с окрашенным фоном. Всё, что не относится к фону заключаю в группу для возможности трансформации.
В заключении создаём текстовый блок вверху страницы, присваиваем ему идентификатор, добавляем стиль. Пишем javascript код, который будет менять текст в зависимости от маркера, на который наведён курсор мышки. Это и будет нашим простеньким интерактивом для svg рисунка. Итоговую картинку в форме интерактивного плаката можете посмотреть ниже. Наведите курсор мышки на маркер и протестируйте svg документ.
Если Вам потребуется оптимизировать svg изображение и создать интерактивную svg картинку при помощи JavaScript и css3 - рад быть полезным. Также можете воспользоваться предложенным способом или информацией, размещённой на данном проекте.