JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

21.3. SVG - масштабируемая векторная графика

Масштабируемая векторная графика (SVG) - это грамматика языка XML для описания графических изображений. Слово «векторная» в названии указывает на фундаментальное отличие от таких форматов растровой графики, как GIF, JPEG и PNG, где изображение задается матрицей пикселов. Формат SVG представляет собой точное, не зависящее от разрешения (отсюда слово «масштабируемая») описание шагов, которые необходимо выполнить, чтобы нарисовать требуемый рисунок. Вот пример простого SVG-изображения в текстовом формате:

<svg xmlns=" http://www.w3.org/2000/svg "

viewBox="0 0 1000 1000"> 

<defs> 

<linearGradient id="fade"> 

<stop offset="0%" stop-color="#008"/> 

<stop offset="100%" stop-color="#ccf"/>

</linearGradient>

</defs>

<!
– -

Нарисовать прямоугольник с тонкой черной рамкой и заполнить его градиентом

– ->

<rect х="100” у="200" width="800" height="600" stroke="black"

stroke-width="25" fill="url(#fade)"/>

</svg>

На рис. 21.1 показано графическое представление этого SVG-файла.

SVG - это довольно обширная грамматика умеренной сложности. Помимо простых примитивов рисования она позволяет воспроизводить произвольные кривые, текст и анимацию. Рисунки в формате SVG могут даже содержать JavaScript-сценарии и таблицы CSS-стилей, что позволяет наделить их информацией о поведении и представлении. В этом разделе показано, как с помощью клиентского JavaScript-кода (встроенного в HTML-, а не в SVG-документ) можно динамически создавать графические изображения средствами SVG. Приводимые здесь примеры SVG-изображений позволяют лишь отчасти оценить возможности формата SVG. Полное описание этого формата доступно в виде обширной, но вполне понятной спецификации, которая поддерживается консорциумом W3C и находится по адресуОбратите внимание: эта спецификация включает в себя полное описание объектной модели документа (DOM) для SVG-документов. В данном разделе рассматриваются приемы манипулирования SVG-графикой с помощью стандартной модели XML DOM, а модель SVG DOM не затрагивается.

К моменту написания этих строк все текущие веб-броузеры, кроме IE, имели встроенную поддержку формата SVG (она также будет включена в IE9). В последних версиях броузеров отображать SVG-изображения можно с помощью обычного элемента

<img>

. Некоторые немного устаревшие броузеры (такие как Firefox 3.6) не поддерживают такую возможность и требуют использовать для этих целей элемент

<object>

<object data="sample.svg" type="image/svg+xml" width=''100" height="100"/>

При использовании в элементе

<img>

или

<object>

SVG можно рассматривать как еще один формат представления графических изображений, который, с точки зрения программиста на языке JavaScript, ничем особенным не выделяется. Гораздо больший интерес представляет сама возможность встраивания SVG-изображений непосредственно в документы и выполнения операций над ними. Поскольку формат SVG является грамматикой языка XML, изображения в этом формате можно встраивать непосредственно в XHTML-документы, как показано ниже:

<?xml version="1.0"?>

<html xmlns=" http://www.w3.org/1999/xhtmr'

xmlns:svg=" http://www.w3.org/2000/svg ">

<body>

Это красный квадрат: <svg:svg width="10" height="10">

<svg:rect x="0" y="0” width="10" height="10" fill="red"/>

</svg:svg>

Это голубой круг: <svg:svg width="10" height="10">

<svg:circle cx="5" cy="5" r="5" fill="blue"/>

</svg:svg>

</body>

</html>

Этот прием можно использовать во всех текущих броузерах, кроме IE. Нарис. 21.2 показано, как Firefox отображает этот XHTML-документ.

Стандарт HTML5 сокращает количество различий между XML и HTML и позволяет вставлять разметку на языке SVG (и MathML) непосредственно в HTML-файлы, без объявления пространств имен или префиксов тегов:

<!DOCTYPE html>

<html>

<body>

Это красный квадрат: <svg width="10" height="10">

<rect x="0" y="0" width="10" height="10" fill="red"/>

</svg>

Это голубой круг: <svg width="10" height="10">

<circle cx="5" cy="5" r="5" fill="blue"/>

</svg>

</body>

</html>

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

Так как формат SVG - это грамматика языка XML, рисование SVG-изображений заключается просто в использовании модели DOM для создания соответствующих XML-элементов. В примере 21.2 приводится реализация функции

pieChart,

которая создает SVG-элементы для воспроизведения круговой диаграммы, подобной той, что показана на рис. 21.3.

1-291 292 293 294 295 296 297 298 299 300 301 302 303 304 305-468

Поделиться с друзьями:

Чтение онлайн

КНИГИ

АВТОРЫ

ЖАНРЫ

Деловая литература

Детективы

Детские

Документальная литература

Дом и Семья

Драматургия

Жанр не определен

Компьютеры и Интернет

Любовные романы

Научно-образовательная

Поэзия

Приключения

Проза

Прочее

Религия и эзотерика

Справочная литература

Старинная литература

Техника

Фантастика

Фольклор

Юмор

JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

Шрифт: