Подписаться на получение новых статей на почту:

Кнопка в SVG. Обработка событий. Шаг №65

Всем привет. После рассмотрения ПИД — регулятора в прошлой статье №64, мы с Вами возвращаемся к проектированию web-интерфейса, где мы уже рассмотрели доступ к SVG-элементам и передачу GET-параметров в статье №62. В этой же статье мы рассмотрим и сделаем кликабельные кнопки, с помощью событий, на интерактивном Web — интерфейсе контроллера сбора данных.

Кто забыл, то смотрим пошаговое выполнение проекта в статье планирование №60. Наша задача сделать кликабельную кнопку в SVG, здесь можно, например взять два круга разными цветами и при нажатии на кнопку будет срабатывать событие, которое выведет нижний круг поверх другого, создавая при этом эффект затемнения кнопки. Либо просто менять цвет. Работать мы будем с двумя событиями onmousedown - срабатывание в момент нажатия на кнопку мыши и onmouseup -  отпускание кнопки мыши, пока курсор находится в пределах элемента, к которому добавлен данный атрибут. Теперь наша задача это получить доступ к фигурам в виде кнопок. Как мы помним из предыдущей статьи файл.svg это у нас набор координат с фигурами. Если мы откроем код страницы интерфейса, то навряд ли сможем быстренько найти интересующую нас фигуру.  Для этого воспользуемся инструментом разработчика веб — браузера и найдем интересующие нас объекты, как на рисунке ниже.

Кнопка в SVG

Определили ID кнопки. Теперь открываем список фигур из которых состоит кнопка. Нас интересует круг по середине. Находим строку, которая описывает этот круг:

<circle xmlns="http://www.w3.org/2000/svg" fill="#735348" cx="8.84088" cy="11.9038" r="4.41504"/>

В эту строку мы будем вставлять события, но для начала в файле.svg пропишем функцию javascript, которая будет срабатывать по событию и менять цвет фигуры. Пишем их там же где и функция доступа к файлу. Ниже функция отпускания и нажатия на кнопку соответственно.

<script type="text/javascript">
        function bakeColor () {.
                var myLake = document.getElementById («lake»);
                myLake.setAttribute («fill», «#735348»);
        }
</script>

<script type="text/javascript">
         function lakeColor () {
                var myLake = document.getElementById («lake»); //Передача ссылки для измененния методов
                myLake.setAttribute («fill», «blue»);
         }
</script>

Теперь добавим в строку, нашего круга, события и ID элемента, по которому в функции возвращается ссылка на узел документа, которую можно использовать для изменения свойств и обращения к методам узла.

Также поступаем и со второй кнопкой. И у нас уже две кликабельные кнопки. Ниже на рисунке результат.

Кнопка в SVG. Обработка события.

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

Просмотрено 1877 раз.

Я на Google+

Кнопка в SVG. Обработка событий. Шаг №65: 4 комментария

  1. добрый день. а как можно будет скопировать svg кнопку с одного шаблона на другой? у меня есть все исходинки но не могу скопировать понравишуюся svg кнопку. за ранее спасибо

    • Добрый. Кнопка это группа состоящая из фигур. Скопировать код из Файла.SVG по ID, единственное координаты подкорректировать на своем рисунке, в этой группе она полностью описана. Можно рисовать самому либо интегрировать схему, как я и делал в статье 62 — для этого проекта.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Subscribe without commenting