Часть X.
Векторная графика: языки VML и SVG

"Каждый художник, который изображает небо зеленым, а траву голубой, должен быть подвергнут стерилизации."

Адольф Гитлер

Глава 10.1. Введение в язык VML

10.1.1. VML и SVG

VML (Vector Markup Language) — это XML-приложение, разработанное корпорацией Microsoft для кодирования двумерной векторной графики. Поддержка VML в настоящее время осуществляется только обозревателем Internet Explorer 5.x и пакетом Microsoft Office 2000.

Microsoft передал в мае 1998 г. спецификацию этого языка W3C в качестве предложения для стандартизации, однако W3C предложил в качестве стандарта собственную спецификацию SVG (Scalable Vector Graphics). Полной программной реализации SVG пока нет, но этот язык несомненно будет в ближайшее время поддержан многими системами. Поэтому мы решили дать описание обоих языков векторной графики — и VML, и SVG. VML описан в первых пяти главах этой части, а SVG — начиная с гл. 10.6.

Приведенное ниже описание VML соответствует его описанию в MSDN Library Внешняя ссылка . Мы описываем только те возможности VML, которые поддерживаются Веб-обозревателем; расширения VML, добавленные в Microsoft Office 2000, не рассматриваются. Для того, чтобы видеть, как элементы VML отображаются на экране, эту и последующие главы следует просматривать в обозревателе Internet Explorer 5.x.

10.1.2. Включение VML в HTML-документы

Как мы уже сказали, VML — это XML-приложение, т. е. специализированный язык, построенный по правилам XML. Для включения элементов VML в свою HTML-страницу мы должны сделать две вещи.

Во-первых, нужно задать пространство имен VML, чтобы анализатор HTML мог понять, когда ему вызывать XML-процессор для разбора конструкций VML. Для этого тег HTML нашей страницы нужно записать так:

<html xmlns:v="urn:schemas-microsoft-com:vml">

Теперь префикс v: в теге будет означать, что этот тег описывает VML-, а не HTML-элемент.

Во-вторых, мы должны указать обозревателю, как отображать обнаруженные в документе элементы VML. VML реализован в Microsoft Internet Explorer как встроенная реакция (default behavior). Поэтому в заголовок документа нужно включить следующие строки:

<style>
v\:* { behavior: url(#default#VML) }
</style>

Эта таблица стилей указывает, что теги с префиксом v: обрабатываются встроенной реакцией VML.

10.1.3. Краткий обзор VML

VML имеет всего два основных элемента: shape и group. Элемент shape описывает отдельную графическую фигуру, а элемент group позволяет объединять несколько фигур в группу с тем, чтобы в дальнейшем применять к этой группе различные преобразования. Элемент shape может иметь атрибут path, который задает форму фигуры как набор отрезков и плавных кривых, и дополнительные атрибуты, задающие рамку фигуры, ее заливку, текст и т. п. Кроме того, основные элементы могут содержать подэлементы, которые задают содержимое фигур и групп.

Помимо названных, в VML включены еще несколько элементов верхнего уровня. Таковы элемент shapetype, позволяющий описать некую фигуру, а затем многократно отображать ее на экране, и элементы, реализующие основные графические примитивы: line (отрезок), polyline (ломаная), curve (кривая Безье), rect (прямоугольник), roundrect (прямоугольник со скругленными углами), oval (эллипс), arc (дуга эллипса) и image (внешний графический образ).

Поясним введенные понятия примером. Следующий элемент задает отображение прямоугольника со скругленными углами, залитого желтым цветом и имеющего синюю рамку. (При написании VML-элементов важно помнить, что их синтаксис должен следовать синтаксическим правилам XML, а не HTML.)

<v:roundrect style='position:relative; left: 3em; top: 0; width: 200px; height: 75px'
  arcsize="0.25" fillcolor="yellow" strokecolor="blue" strokeweight="2px"/>

Отображаться этот прямоугольник будет так:

10.1.4. Каскадные стили

Из приведенного примера видно, что свойства отображаемой фигуры частично задаются стилями CSS, а частично собственными атрибутами VML. Элементы VML поддерживают все стандартные свойства CSS, а также два дополнительных свойства, позволяющие нам поворачивать и опрокидывать фигуры.

10.1.4.1. Поворот фигуры: свойство rotation

Синтаксис:  rotation: <угол>
Начально:   0
Применимо:  ко всем элементам VML
Сценарии:   элемент.rotation = "выражение"

Свойство rotation задает угол поворота фигуры. Его значением является угол в диапазоне от -360deg до 360deg, при этом положительный угол означает поворот по часовой стрелке. Отметим, что после поворота фигура позиционируется заново в соответствии с новыми координатами объемлющего ее прямоугольника. Кроме того, обратите внимание, что в сценариях это свойство является свойством не атрибута style, а самого элемента.

Пример: при добавлении к стилям описанного выше прямоугольника свойства rotation: 10deg получим:

10.1.4.2. Опрокидывание фигуры: свойство flip

Синтаксис:  flip: x | y | xy | yx
Начально:   нет
Применимо:  ко всем элементам VML
Сценарии:   элемент.style.flip = "выражение"

Свойство flip задает опрокидывание фигуры. Значение x означает опрокидывание относительно оси y, а y — опрокидывание относительно оси x. Оба эти значения могут быть заданы одновременно.

Пример: добавим к стилям нашего прямоугольника еще и свойство flip: x:

10.1.5. Локальные координаты

Элементы shape и group являются объемлющими прямоугольниками для своего содержимого. Внутри этого прямоугольника мы можем определить локальную систему координат с помощью атрибутов coordsize и coordorigin. В этом случае все позиционирующие свойства CSS будут задаваться в локальных координатах, т. е. в числах, а не в единицах размеров CSS.

Атрибут coordsize задает ширину и высоту объемлющего прямоугольника в локальных координатах, а атрибут coordorigin задает локальные координаты его верхнего левого угла. Пусть, например, группа задана следующим образом:

<v:group style='width: 300px; height: 250px' coordsize="100,1000" 
  coordorigin="-50,-500"> … </v:group>

Здесь объемлющий прямоугольник имеет ширину 300px и высоту 250px. Все это пространство преобразуется в локальную систему координат, в которой ось x принимает значения от -50 до +50, а ось y — от -500 до +500. Начало локальных координат (0, 0) находится в центре прямоугольника. Теперь размеры и позиции всех графических объектов внутри этой группы будут задаваться в локальных координатах. Это позволяет нам в дальнейшем изменить размеры объемлющего прямоугольника, не изменяя значений атрибутов расположенных в нем объектов, и получить правильное отображение измененной группы.

На практике рекомендуется задавать значения coordsize пропорциональными ширине и высоте объемлющего прямоугольника, поскольку в противном случае отображение будет искажено из-за анизотропности координатных осей. Если атрибут coordorigin не задан, то координатами левого верхнего угла прямоугольника является точка (0, 0).

Важно также подчеркнуть, что объемлющий прямоугольник не является областью отсечения изображения, т. е. внутренние элементы могут выходить за его пределы. Объемлющий прямоугольник просто задает правила преобразования локальных координат в экранные.

10.1.6. Атрибуты элементов VML

10.1.6.1. Типы атрибутов

Атрибуты элементов VML имеют следующие базовые типы:

Тип	Описание
Boolean	Атрибут принимает значения true (истина) и false (ложь).
Number	Числовые значения (целые или дробные) и размеры CSS.
String	Строковые значения, которые обычно ограничены определенным набором возможных значений.
Vector2D	Двумерная координата вида "x,y" или "x y". В сценариях доступна либо целиком, как строка, либо как объект со свойствами `x` и `y`.
Vector3D	Трехмерная координата вида "x,y,z" или "x y z". В сценариях доступна либо целиком, как строка, либо как объект со свойствами `x`, `y` и `z`.

Примечание. Цвета являются разновидностью строковых значений и задаются так же, как в CSS, но с одним важным отличием: дополнительные имена цветов из Таблицы П9.2 в VML не распознаются.

10.1.6.2. Общие атрибуты

Ряд атрибутов применим ко всем базовым элементам VML. Сюда относятся:

базовые атрибуты HTML class, id, style и title;
атрибуты HTML alt (альтернативный текст, который выводится вместо элемента), href (URI ресурса, который загружается при щелчке мыши на объекте) и target (фрейм, в который загружается этот ресурс);
атрибуты coordsize и coordorigin, задающие локальную систему координат.

10.1.7. Объектная модель VML

Элементы VML доступны в объектной модели HTML-документа так же, как и остальные элементы дерева документа. Например, мы можем включить в документ следующий текст:

<div id="myDiv"></div>

<script language="JScript">
var r = myDiv.appendChild(document.createElement("v:rect"));
r.style.position = "absolute";
r.style.top = 50;
r.style.left = 50;
r.style.width = 100;
r.style.height = 100;
r.fillcolor = "red";
</script>

Приведенный сценарий создаст элемент rect, настроит его атрибуты и выведет внутри элемента DIV:

Подэлементы базовых элементов VML доступны как их атрибуты. Например, для искажения полученного квадрата мы можем добавить к нему подэлемент skew, но в большинстве случаев создать этот подэлемент проще добавлением к сценарию следующих строк:

r.skew.matrix = "1,0.5,0,0.7,0,0";
r.skew.on = true;

В результате получим: