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

Флэнаган Дэвид
Шрифт:

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

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

<?xml version="1.0"?>

<!-- Объявить HTML как пространство имен по умолчанию, a SVG - с префиксом ''svg:" -->

<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.

Рис. 21.3. Круговая диаграмма в формате SVG, построенная JavaScript-сценарием

Пример 21.2. Рисование круговой диаграммы средствами JavaScript и SVG

/* *

* Создает элемент <svg> и рисует в нем круговую диаграмму.

* Аргументы:

* data: массив чисел для диаграммы, по одному для каждого сектора.

* width,height: размеры SVG-изображения в пикселах

* сх, су, г: координаты центра и радиус круга

* colors: массив цветов в формате HTML, по одному для каждого сектора

* labels: массив меток для легенды, по одной для каждого сектора

* 1х, 1у: координаты левого верхнего угла легенды диаграммы

* Возвращает: