Использование языка (технологии) SVG в качестве изображения позволяет управлять каждым элементом картинки что дает возможность построения web-интерфейса на простом рисунке, в отличии от растрового варианта. На примере схемы устройства на контроллере, которую мы нарисовали в программе Fritzing и конвертировали в данный формат, получим доступ к необходимым элементам. Благодаря тому, что SVG ( Scalable Vector Graphics) — язык разметки масштабируемой векторной графики. Также следует добавить, что рисунок данного формата имеет свой DOM, что делает возможным применять CSS-правила и управлять JavaScript'ом. Изображение в формате .svg это сплошные координаты и фигуры, наподобие кода карты-изображения. Только в отличие от последнего, имеет широкий функционал, в виде различных геометрических фигур, широкого спектра визуального свойств, использования обработчика событий, анимации и сценариев, возможность вставлять элементы с изображениями в форматах PNG, GIF или JPG. В данной статье разберем подключение и получение доступа к svg-файлу из html используя javascript. Научимся выводить Get –параметры. Структура файла представляет собой:
1. Стандартный XML-заголовок (объявление указывающее версию XML и кодировку символов (encoding))
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2. Заголовок DOCTYPE, определяющий тип документа (может и небыть)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3. И последняя корневой элемент документа с указанием пространства имен SVG.
Завершается документ всегда закрытием корневого тега </svg> .
Для получения доступа к элементам svg-файла мы используем javascript, и библиотеки jQuery. Для чего прописываем функции в файле html и svg. В итоге чего получаем способность проектировать интерактивный веб-интерфейс.
Подробнее читайте по ссылке.
Это интересно
0
|
|||
Последние откомментированные темы:
-
Лучший чат-бот с искусственным интеллектом - какой из них вам подходит?
(1)
boris 1
,
13.01.2022
-
Новогоднее украшение рабочего стола ПК
(1)
Елена2022
,
21.12.2021
-
Как JPG преобразовать в Word с распознаванием текста
(1)
Olejaweb
,
13.11.2021
-
Как вернуть классическое ленточное меню в проводник Windows 11
(1)
Сергей Михайлов сын
,
26.10.2021
20240505052644