SVGScripting: Обработка действий указателя мыши

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

Как видно на верхнем рисунке, при наведении на точку карты в текстовом поле выводится название города, при щелчке появляется окно с сообщением. Реализуем эти функции при помощи Inkscape.


1. Создайте новый документ размером 400х400. Нарисуйте несколько фигур. В нашем примере это круг, прямоугольник и звезда. Далее создайте текстовый объект, в текстовое поле введите любой текст.

2. Выделите текстовый объект. Перейдите в меню Объект > Свойства объекта (Ctrl+Shift+O). Откроется окно свойств объекта. Измените ID текстового объекта на varLabel .

3. Откройте редактор XML (в меню Правка > Редактор XML или комбинация клавиш Shift+Ctrl+X). В основной ветви документа создайте новую подветвь, дайте ей имя svg:script. Будет создана новая ветвь, идентификатор для неё определится автоматически. В новой ветви создайте атрибут type со значением text/javascript.

4. Далее создайте текстовую подветвь в которую вставьте следующий скрипт:

//объявление глобальной переменной

var svgLabelText;

function init(evt) {

 //делаем привязку переменной к полю объекта с текстом

 svgLabelText = document.getElementById("varLabel").firstChild.firstChild;

}

function showLabel(LabelText) {

 //меняем текст в объекте

 svgLabelText.nodeValue = LabelText;

}

function cleanLabel() {

 //очищаем текстовое поле

 svgLabelText.nodeValue = " ";

}

function AlertClick(AlertText) {

 //показываем окно с сообщением

 alert(AlertText);

}

5. Чтобы наш конечный документ исправно функционировал, необходимо проинициализировать скрипт во время загрузки. Для этого в главной ветви документа создайте новый атрибут onload со значением init(evt). После редактор XML можно закрыть, он нам больше не понадобится.

6. Выберите инструмент создания и редактирования текстовых объектов (F8). Выделите на рисунке объект с текстом (он был создан на шаге 2) и удалите текст. Важно! Нельзя оставлять текстовое поле пустым, конечный документ при этом не будет функционировать. Чтобы этого избежать, введите один пробел.


7. Выделите круг. Перейдите в меню Объект > Свойства объекта (Shift+Ctrl+O). Откроется окно свойств объекта. Нажмите на кнопку Интерактивность (она находится в самом низу окна). Далее следует настроить вызов функций с необходимыми аргументами:

• onclick AlertClick('Красный!!!') - при клике на объекте запускаем функцию, которая отобразит окно с сообщением
• onmouseover showLabel('Круг') - при прохождении указателя мыши над объектом запускаем функцию, которая отобразит текст в текстовом поле
• onmouseout cleanLabel() - при покидании указателя мыши объекта запускаем функцию, которая очистит текстовое поле.

8. Естественно вы можете комбинировать вызов функций с желаемыми действиями. Повторите операции, описанные в шаге 7, с прямоугольником и звездой, соответственно изменив текст в одинарных кавычках.


9. Когда закончите, сохраните документ и откройте его в браузере, который поддерживает SVG-графику. Если вы сделали всё правильно, то рисунок должен функционировать.