JavaScript. Подробное руководство, 6-е издание
Шрифт:
– ->
<rect х="100” у="200" width="800" height="600" stroke="black"
stroke-width="25" fill="url(#fade)"/>
</svg>
На рис. 21.1 показано графическое представление этого SVG-файла.
SVG - это довольно обширная грамматика
К моменту написания этих строк все текущие веб-броузеры, кроме 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 как пространство имен по умолчанию, 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>
Этот
Стандарт 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у: координаты левого верхнего угла легенды диаграммы
* Возвращает:
Поделиться:
Популярные книги
Старый, но крепкий 3
3. Культивация без насилия
Фантастика:
рпг
уся
фэнтези
5.00
рейтинг книги
Эмиссар
8. Ушедший Род
Фантастика:
боевая фантастика
аниме
попаданцы
7.50
рейтинг книги
Газлайтер. Том 28
28. История Телепата
Фантастика:
боевая фантастика
аниме
попаданцы
5.00
рейтинг книги
Сопротивление
11. Последняя жизнь
Фантастика:
аниме
фэнтези
попаданцы
7.33
рейтинг книги
Кодекс Охотника. Книга VII
7. Кодекс Охотника
Фантастика:
фэнтези
попаданцы
аниме
4.75
рейтинг книги
Чиновникъ Особых поручений
6. Александр Агренев
Фантастика:
попаданцы
альтернативная история
5.00
рейтинг книги
Сталин
3. Загадки жизни и смерти
Проза:
историческая проза
7.36
рейтинг книги
Ваше Сиятельство
1. Ваше Сиятельство
Фантастика:
фэнтези
попаданцы
5.00
рейтинг книги
Идеальный мир для Лекаря 2
2. Лекарь
Фантастика:
юмористическая фантастика
попаданцы
аниме
5.00
рейтинг книги
На границе империй. Том 7
7. Фортуна дама переменчивая
Фантастика:
боевая фантастика
космическая фантастика
попаданцы
6.75
рейтинг книги
Изменяющий-Механик. Компиляция. Книги 1-18
Собрание сочинений
Фантастика:
боевая фантастика
космическая фантастика
5.00
рейтинг книги
Я до сих пор князь. Книга XXII
22. Дорогой барон!
Фантастика:
юмористическое фэнтези
аниме
попаданцы
5.00
рейтинг книги
Чужое наследие
3. Другая сторона
Фантастика:
боевая фантастика
8.47
рейтинг книги
Дважды одаренный. Том VIII
8. Дважды одаренный
Фантастика:
боевая фантастика
альтернативная история
аниме
попаданцы
5.00