svg
.pdf
91
Здесь новое значение атрибута transform устанавливается приписыванием к текущему значению через пробел строки, отвечающей за поворот на 30°. Однако при этом увеличивается объем данных, сохраняемых в атрибуте
transform.
Для экономии места на Web-странице панели с гиперссылками можно расположить в стопке и перелистывать их с помощью мыши. В листинге 13.60 приведен пример создания двух панелей, одна из которых частично перекрывает другую. При наведении указателя мыши на панель заднего плана передняя панель поворачивается, открывая заднюю. При наведении указателя на переднюю панель она занимает исходное положение. На рис. 13.57 показаны различные состояния данной пары панелей.
Несмотря на относительно большой объем, код имеет довольно простую структуру. В контейнере <defs> определены два прямоугольника: один для отображения тени панели, а другой для ее лицевой стороны. Для ли-
цевых сторон панелей определены заливки линейными градиентами. Вывод на экран прямоугольников с градиентной заливкой производится с помощью тегов <use>. Данные заготовки группируются вместе с текстами, ссылками и графическим растровым изображением. Обработчик наведения указателя мыши на заднюю панель выполняет наклон, масштабирование и перенос группы элементов, образующих переднюю панель. Вся совокупность перечисленных преобразований компактно записана в матричном виде. Обработчик наведения указателя мыши на переднюю панель задает пустое значение для свойства transform. В результате передняя панель либо остается в исходном положении, либо возвращается в него.
92
Листинг 13.60. Пара панелей
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="720" xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>Панели меню</title>
<style type="text/css"> <![CDATA[
.head { /* заголовок панели */ font-size:20px;font-weight:bold; fill:#CC3300
}
text {font-size:14px; }
a {font-family:sans-serif} a:hover {fill:darkred}
]]>
</style>
<script type="text/javascript"> <![CDATA[
/* Обработчики события onmouseover */
function rot1(){ // приводим переднюю панель в исходное состояние var x=document.getElementById("mypane1"); x.setAttribute("transform","")
}
function rot2(){ // поворачиваем переднюю панель на 30 град. var x=document.getElementById("mypane1"); x.setAttribute("transform",
"matrix(0.4, -0.268, 0, 1, 0, 40)")
}
]]>
</script>
<defs>
<!-- Тень -->
<rect id="shadow" width="180" height="210" rx="10" fill="black" fill-opacity="0.4"/>
<!-- Лицевая часть -->
<rect id="face" width="180" height="210" rx="10" stroke="#00f0f0" fill-opacity="0.9"/>
<linearGradient id="MyGradient1"
93
x1="0%" y1="0%" x2="20%" y2="100%">
<stop offset="0" style="stop-color:#f0ffff;"/> <stop offset="100%" style="stop-color:#00a0a0;"/>
</linearGradient>
<linearGradient id="MyGradient2" x1="0%" y1="0%" x2="25%" y2="100%">
<stop offset="0" style="stop-color:#f8f8f8;"/> <stop offset="100%" style="stop-color:#0080ff;"/>
</linearGradient>
</defs>
<g onmouseover="rot2()">
<!-- Панель 'Разное' -->
<!-- Тень -->
<use xlink:href="#shadow" x="103" y="9"/> <!-- Лицевая часть -->
<use xlink:href="#face" x="95" y="3" fill="url(#MyGradient1)"/> <!-- Содержимое панели -->
<text x="150" y="30" class="head" >Разное</text>
<a xlink:href="http://dunaevv1.narod.ru">
<text x="105" y="57">Сам себе Web-дизайнер</text> </a>
<a xlink:href="http://www.w3.org/TR/SVG11"> <text x="105" y="77">Спецификация SVG</text>
</a>
<a xlink:href="http://ru.wikipedia.org/wiki/">
<text x="105" y="117">Википедия</text>
</a>
<image x="190" y="100" width="79" height="76" xlink:href="book.gif"/>
<!-- Здесь могут быть еще элементы -->
</g>
<g id="mypane1" onmouseover="rot1()">
<!-- Панель 'Поисковики' -->
<!-- Тень -->
<use xlink:href="#shadow" x="48" y="46"/> <!-- Лицевая часть -->
<use xlink:href="#face" x="40" y="40" fill="url(#MyGradient2)"/> <!-- Содержимое панели -->
<text x="70" y="63" class="head">Поисковики</text>
<a xlink:href="http://www.yandex.ru">
<text x="85" y="90">Яндекс</text>
</a>
94
<a xlink:href="http://www.rambler.ru"> <text x="85" y="110">Rambler</text>
</a>
<a xlink:href="http://www.google.ru"> <text x="85" y="130">Google</text>
</a>
<a xlink:href="http://www.yahoo.com"> <text x="85" y="150">Yacho</text>
</a>
<a xlink:href="http://www.altavista.com"> <text x="85" y="170">AltaVista</text>
</a>
<a xlink:href="http://www.aport.ru">
<text x="85" y="190">Апорт</text>
</a>
<image x="160" y="190" width="48" height="48" xlink:href="ask.png"/>
<!-- Здесь могут быть еще элементы --> </g>
</svg>
13.14. Вставка в SVG-документ XHTML-кода
В SVG-документы можно включать внешние элементы, имеющие иное пространство имен. В частности, есть возможность вставки XHTML-кода, которая оказывается весьма кстати при форматировании текстов, создании элементов форм, таблиц, внедрении видео, Web-страниц и т. п. внутри SVGдокумента.
Для вставки внешних объектов применяется контейнерный тег <foreignObject>. Прямоугольная область, в которой отображается содержимое внешнего объекта, задается атрибутами:
x, y — горизонтальная и вертикальная координаты верхнего левого угла;
width, height — ширина и высота.
В данном разделе мы вкратце рассмотрим вставку в SVG-документ фрагментов XHTML-кода. Более подробную информацию по данной теме можно по-
лучить в спецификации (http://www.w3.org/TR/SVG11/extend.html).
Шаблон для вставки (X)HTML-кода:
<foreignObject x="x" y="y" width="w" height="h"> <html xmlns="http://www.w3.org/1999/xhtml"> <!-- Здесь располагается XHTML-код --> </html>
</foreignObject>
95
Здесь <html> можно заменить на <body>. Данные контейнеры удобны при вставке нескольких XHTML-элементов. Тогда атрибут xmlns указывают только в теге самого верхнего уровня, <html> или <body>. При вставке одного элемента указывают только соответствующий ему тег, но с атрибутом xmlns.
В листинге 13.61 приведен пример вставки нескольких элементов XHTML. При этом SVG-элементы <rect> и <foreignObject> сгруппированы, а группа повернута на 5°. Это сделано для демонстрации, что над вставленным фрагментом можно выполнять такие же операции, как и над SVG-элементами. Вид данного документа в браузере показан на рис. 13.58.
Листинг 13.61. Вставка XHTML-кода в SVG-документ
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
<title>Вставка XHTML</title>
<g transform="rotate(5)">
<rect x="20" y="10" width="250" height="200" rx="15" fill="#00ffff" stroke="blue"/>
<foreignObject x="30" y="10" width="230" height="180">
<!-- Здесь XHTML-код -->
<body xmlns="http://www.w3.org/1999/xhtml"> <style type="text/css">
h1 {color:red} </style> <h1>Заголовок</h1>
<p>Здесь расположены элементы,<br/> заданные XHTML-кодом.
</p>
Введите что-нибудь:
<input type="text" /> </body>
</foreignObject>
</g>
</svg>
96
Рис. 13.58. Вставка XHTML-кода в SVG-документ
В SVG-документ можно вставить XHTML-документ из внешнего файла и при желании трансформировать его (масштабировать, повернуть и т. п.). В листинге 13.62 приведен пример вставки в SVG-документ двух плавающих фреймов с загрузкой в них Web-страниц. При этом фреймы со своим содержимым поворачиваются на 5° и масштабируются с коэффициентом 0,3, сохраняя свою функциональность (гиперссылки, поля ввода, Flash-ролики и т. п.). Вид данного документа в браузере Firefox показан на рис. 13.59.
Листинг 13.62. Вставка Web-страниц
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.0" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="800">
<title>Вставка XHTML</title>
<foreignObject x="200" y="10" width="1000" height="800" transform="scale(0.3) rotate(5)">
<iframe xmlns="http://www.w3.org/1999/xhtml" src="http://www.rambler.ru" width="1000" height="800">
</iframe>
</foreignObject>
<foreignObject x="100" y="400" width="1000" height="800"
97
transform="scale(0.3) rotate(-5)"> <iframe xmlns="http://www.w3.org/1999/xhtml"
src="http://dunaevv1.narod.ru" width="1000" height="800">
</iframe>
</foreignObject>
</svg>
Рис. 13.59. Вставка и трансформация Web-страниц
Аналогичным образом в SVG-документ можно вставить и другие внешние объекты. В листинге 13.63 приведен пример внедрения FLV-проигрывателя с загружаемым в него видео формата FLV (см. разд. 11.2.4). При этом проигрыватель поворачивается на 10°.
Листинг 13.63. Вставка видео
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg" version="1.0"
98
xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="800">
<title>Вставка XHTML</title>
<foreignObject x="50" y="20" width="600" height="500" transform="rotate(10)">
<body xmlns="http://www.w3.org/1999/xhtml" >
<embed src="flvplayer.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" flashVars='st=styles/mystyle.txt&fyle=video/masterbook.flv' width="320" height="240"/>
</body>
</foreignObject>
</svg>