69048

Представление текста в SVG

Лекция

Информатика, кибернетика и программирование

В XML текстовое содержание определяется как последовательность символов, где каждый символ определен своим кодом Unicode. С другой стороны, шрифты состоят из набора глифов (glyphs) и другой связанной информации, такой, как таблицы шрифтов.

Русский

2014-09-29

335 KB

4 чел.

 26

Лекция 4-14

6.1.9. Представление текста в SVG

 6.1.9.1. Элементы text и tspan

 6.1.9.2. Элемент tref

 6.1.9.3. Элемент textPath

6.1.10. Маркеры в SVG

6.1.11. Градиенты и шаблоны в SVG

 6.1.11.1. Линейный градиент

 6.1.11.2. Радиальный градиент

 6.1.11.3. Шаблоны 

6.1.12. Клипы и маски в SVG 6.1.12.1. Создание клипов

 6.1.12.2. Использование масок

6.1.13. Фильтры в SVG

 6.1.13.1. Элемент filter

 6.1.13.2. Фильтры для источников света

 6.1.13.3. Фильтры смешивания изображений

 6.1.13.4. Фильтры задания и преобразования цветов

 6.1.13.5. Фильтры преобразования изображений

 6.1.13.6. Пример использования фильтров

6.1.14. Интерактивность в SVG

 6.1.14.1. Использование сценариев

 6.1.14.2. Ссылки

 6.1.14.3. Курсор

6.1.15. Анимация в SVG

 6.1.15.1. Анимация  с помощью средств SVG DOM и языков сценариев

 6.1.15.2. Основные положения анимации в SVG 

 6.1.15.3. Общие модули атрибутов для элементов анимации в SVG

 6.1.15.4. Элемент animate

 6.1.15.5. Элемент set

 6.1.15.6. Элемент animationMotion

 6.1.15.7. Элемент animateColor

 6.1.15.8. Элемент animateTransform

6.1.9. Представление текста в SVG

В XML текстовое содержание определяется как последовательность символов, где каждый символ  определен своим кодом Unicode. С другой стороны, шрифты состоят из набора глифов (glyphs) и другой связанной информации, такой, как таблицы шрифтов.  Глиф является формой представления одного или более символов (или, в некоторых случаях, частей символов).  Каждый глиф состоит из идентификатора (строки или числа) и инструкций по рисованию данного глифа для его вывода в ту или иную среду (например, на экран компьютера  или на печать).

Для европейских языков обычно существует взаимно однозначное соответствие между символом и глифом. Однако в некоторых языках такого соответствия нет. Например, в арабском языке один и тот же символ может быть представлен разными глифами, в зависимости от того находится ли он в начале, в конце или в середине слова. Другим примером является вывод буквы ё как диакритического символа "¨" и символа "е", т.е. в данном случае один символ представлен двумя глифами.

Геометрические характеристики шрифта выражены в системе координат, основанной на окне em (высота буквы M шрифта).

К сожалению, при выводе текста кириллицы (как и других не западноевропейских языков) в Adobe Viewer необходимо задавать символы текста в виде сущностей, значениями которых являются коды Unicode данных символов, например, слово символ задается в документе SVG как симв&#43E;&#43B;.

Основными элементами для вывода текста являются элементы text, tspan, tref и textPath. Для текстовых элементов определен родительский интерфейс SVGTextContentElement и дочерние элементы SVGTextElement, SVGTSpanElement, SVGTRefElement и SVGTextPathElement, соответствующие элементам text, tspan, tref и textPath.  

6.1.9.1. Элементы text и tspan

Элемент text задает графический элемент, содержащий текст. Символьные данные внутри элемента текст совместно с атрибутами и таблицами соответствия «символ-глиф» для шрифта определяют выводимые глифы. Для элемента text определены атрибуты модулей Core.attrib, Conditional.attrib, Style.attrib, Text.attrib, TextContent.attrib, Font.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib и External.attrib, а также атрибут преобразования transform.

Кроме этого, для элемента text определены атрибуты x, y, dx, dy, rotate, textLength и lengthAdjust.

В атрибутах x и y задаются координаты x и y первого символа текста. В этих атрибутах может быть задан список координат для каждого символа выводимого текста. По умолчанию значения атрибутов x и y равно "0".

Атрибуты dx и dy смещают позицию текущего текста по оси x или оси y на заданные величины (по умолчанию значения этих атрибутов также равны "0"), а атрибут rotate поворачивает текст на заданную величину.

Атрибут textLength задает вычисленную автором длину текста (если этот атрибут не задан, используется длина строки, вычисленная процессором SVG), а атрибут lengthAdjust задает тип подгонки текста для заданной автором длины текста. Значение "spacing" указывает на то, что подгонка текста выполняется только с помощью пробелов (это значение по умолчанию), а значение "spacingAndGlyphs" указывает, что подгонка выполняется и за счет пробелов и за счет сжатия или растяжения глифов.

Для изменения свойств текста и шрифтов в отдельных фрагментах символьной строки внутри элемента text используется элемент tspan. Этот элемент имеет те же атрибуты, что и элемент text, за исключением атрибутов модуля Text.attrib и атрибута transform.

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

<g font-family="Verdana" font-size="45" >

   <text x="50" y="150" fill="black" >

     &#x042D;&#x043B;&#x0435;&#x043C;&#x0435;&#x043D;&#x0442;

 <tspan font-weight="bold" fill="red">text</tspan>

&#x043E;&#x043F;&#x0440;&#x0435;&#x0434;&#x0435;&#x043B;&#x044F;&#x0435;&#x0442;

&#x0442;&#x0435;&#x043A;&#x0441;&#x0442; &#x0432; SVG.

   </text>

 </g>.

На экран будет выведена следующая строка:

6.1.9.2. Элемент tref

Содержимым элемента текст могут быть не только символьные данные, но и ссылка на другой элемент документа SVG, содержащего символьные данные. Такая ссылка выполняется с помощью элемента tref. Этот элемент имеет те же атрибуты, что и элемент tspan, а также атрибуты модуля XLink.attrib.  

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

<defs>

    <text id="ReferencedText">

     &#x0422;&#x0435;&#x043A;&#x0441;&#x0442;

&#x0441;&#x0441;&#x044B;&#x043B;&#x043A;&#x0438;.

    </text>

</defs>

…  

<text x="100" y="200" font-size="45" fill="red" >

   <tref xlink:href="#ReferencedText"/>

</text>.

На экран будет выведена следующая строка:

6.1.9.3. Элемент textPath

Кроме вывода текста по прямой линии, в SVG можно выводить текст по контуру, заданному в элементе path. Это выполняется с помощью элемента textPath, включающего атрибут xlink:href со ссылкой на элемент path. Для элемента textPath определены атрибуты модулей Core.attrib, Conditional.attrib, Style.attrib, TextContent.attrib, Font.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, GraphicalEvents.attrib, Cursor.attrib, XLink.attrib и External.attrib, а также атрибуты textLength, lengthAdjust, startOffset, method и spacing.

Атрибуты textLength и lengthAdjust имеют тот же смысл, что и для элемента text.

Атрибут startOffset задает смещение начала текста относительно начала контура (данное типа длина).

Атрибут method задает метод, по которому текст выводится вдоль контура. Значение "align" этого атрибута указывает, что текст выводится с использованием простого преобразования без сжатия или растягивания символов (это может привести к нежелательным эффектам, например, при выводе курсива). Более сложное преобразование выполняется, если указано значение "stretch". По умолчанию значение атрибута method равно "align".

Атрибут spacing указывает, как пользовательский агент должен определять расстояние между глифами. Значение "exact" определяет, что глифы должны выводиться в точном соответствии с правилами вывода глифов в SVG (это значение по умолчанию). Значение "auto" определяет, что агент должен использовать специальные алгоритмы при визуальном представлении текста.

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

<g>

   <path id="MyPath" fill="none" stroke="red" stroke-width="2"

         d="M 100 200

            C 200 100 300   0 400 100

            C 500 200 600 300 700 200

            C 800 100 900 100 900 100" />

 </g>

 <text font-family="Verdana" font-size="38" fill="blue" >

   <textPath xlink:href="#MyPath">

   &#x0421;&#x043D;&#x0430;&#x0447;&#x0430;&#x043B;&#x0430;

   &#x0432;&#x0432;&#x0435;&#x0440;&#x0445;,

   &#x043F;&#x043E;&#x0442;&#x043E;&#x043C;

   &#x0432;&#x043D;&#x0438;&#x0437;,

   &#x0437;&#x0430;&#x0442;&#x0435;&#x043C;

   &#x0441;&#x043D;&#x043E;&#x0432;&#x0430;

   &#x0432;&#x0432;&#x0435;&#x0440;&#x0445;.

   </textPath>

 </text>.

На экран будет выведено:

 

6.1.10. Маркеры в SVG

Маркеры – это символы, которые выводятся на осях в элементах  path, line, polyline и polygon. Обычно маркеры используются для рисования стрелок на одной или нескольких осях в элементах  path, line и polyline, либо для вывода стрелок на всех осях в элементах  path, line, polyline и polygon.

Графическое представление маркера определяется в элементе marker. Для того, чтобы указать, какой элемент маркер используется в данном элементе path, line, polyline или polygon, в этом элементе задается один или несколько атрибутов из рассмотренного ранее модуля Marker.attrib, задающие ссылки на соответствующие элементы marker.

Для элемента marker определены атрибуты модуля  Presentation.attrib, а также рассмотренные ранее общие атрибуты viewBox и preserveAspectRatio. Кроме того, для этого элемента могут быть заданы атрибуты markerWidth, markerHeight, markerUnits, и.

Атрибуты markerWidth и markerHeight определяют ширину и высоту порта просмотра, в который будет выводиться маркер. По умолчанию значение этих величин равно "3".

Атрибут markerUnits определяет координатную систему для атрибутов markerWidth и markerHeight, а также содержимого элемента marker. Если значение этого атрибута равно "strokeWidth", координатная система будет иметь единицу, равную размеру ширины контура графического объекта, который ссылается на данный маркер (это значение по умолчанию).  Если значение этого атрибута равно "userSpaceOnUse", координатная система будет иметь единицу, равную единице пользовательской координатной системы того элемента,

Атрибуты refX и refY задают координаты x и y точки ссылки, которая должна быть выровнена точно в позиции маркера. Координаты определяются в координатной системе после применения атрибутов viewBox и preserveAspectRatio. По умолчанию значения этих атрибутов равны "0".

Атрибут orient указывает угол поворота маркера. Значение "auto" автоматически устанавливает ориентацию маркера в зависимости от направления сегмента контура, для которого устанавливается данный маркер. Для этого атрибута можно также задать конкретное значение угла поворота. Например, если задано значение "0" (это значение по умолчанию), то ось x маркера будет выровнена с осью x элемента,  который ссылается на данный маркер.

Для элемента marker в DOM SVG определен интерфейс SVGMarkerElement.

Примеры использования маркеров:

<defs>

<marker id="mCircle" markerWidth="10"

  markerHeight="10"

     refX="5" refY="5"

preserveAspectRatio="xMinYMin meet">

     <circle cx="5" cy="5" r="4"

style="fill: none; stroke: blue;"/>

</marker>

<marker id="mArrow" markerWidth="6" markerHeight="10"

     refX="0" refY="4" orient="auto"

preserveAspectRatio="xMinYMin meet">

     <path d="M 0 0 4 4 0 8"

style="fill: none; stroke: black;"/>

</marker>

<marker id="mTriangle" markerWidth="5"

markerHeight="10" refX="5" refY="5" orient="auto"

preserveAspectRatio="xMinYMin meet">

     <path d="M 0 0 5 5 0 10 Z" style="fill: red;"/>

</marker>

</defs>

<path d="M 10 20 100 20 A 20 30 0 0 1 120 50 L 120 110"

   style="marker-start: url(#mCircle);

 marker-mid: url(#mArrow);

 marker-end: url(#mTriangle);

 fill: none; stroke: black;"/>.

Этот фрагмент документа выведет на экран следующий графический объект:

6.1.11. Градиенты и шаблоны в SVG

6.1.11.1. Линейный градиент

Градиент – постепенный плавный переход вдоль заданного вектора от одного цвета к другому. Если градиент задан, то него можно ссылаться с использованием свойств fill или stroke в графическом элементе. Язык SVG обеспечивает два типа градиентов: линейный градиент или радиальный градиент.

Линейный градиент задается с помощью элемента linearGradient. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib, Gradient.attrib, XLink.attrib и External.attrib. Кроме этого, для элемента linearGradient могут быть заданы атрибуты x1, y1, x2,  y2,     gradientUnits, gradientTransform и spreadMethod.

Атрибуты x1, y1, x2 и y2 задают вектор градиента для линейного градиента (числа или проценты). Вектор градиента обеспечивает начальные и конечные точки, которым соответствует окончание градиента. По умолчанию значения координат равны "0%".

Атрибут gradientUnits определяет систему координат для атрибутов x1, y1, x2 и y2. Если значение этого атрибута равно "userSpaceOnUse", то координаты представляют значения в системе координат текущего пользователя во время ссылки на элемент linearGradient.  Если же значение атрибута gradientUnits равно "objectBoundingBox" (это значение по умолчанию), то пользовательская система координат устанавливается исходя из рамки элемента, к которому применяется градиент.  

Атрибут gradientTransform задает список дополнительных преобразований из координатной системы градиента в целевую координатную систему, определяемую атрибутом gradientUnits.

Атрибут spreadMethod указывает, что произойдет, если градиент начинается или заканчивается в пределах целевого прямоугольника. Атрибут может иметь одно из следующих значений: "pad" – концевые цвета градиента должны заполнить весь прямоугольник, "reflect" – повторять градиент шаблона от начала до конца, затем от конца до начала, затем снова  от начала до конца до тех пор, пока не заполнится весь прямоугольник и  "repeat" – повторять градиент шаблона от начала до конца до тех пор, пока не заполнится весь прямоугольник.

В элементе может быть также задан атрибут xlink:href для ссылки на другой элемент градиента.

Окончание вывода цветов, используемых в градиенте, определяется элементами stop, являющихся дочерними элементами элементов линейного или радиального градиентов. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib и Gradient.attrib. Кроме этого, для элемента stop должен быть задан атрибут offset, который указывает, где будет заканчиваться градиент. Значение этого атрибута может быть либо числом (обычно в диапазоне от 0 до 1) или в процентах (от 0% до 100%). Для линейного градиента значение этого атрибута указывает на положение вдоль вектора градиента.

Для элементов градиента определен базовый интерфейс SVGGradientElement. Дочерними интерфейсами этого интерфейса является интерфейс SVGLinearGradientElement для элемента linearGradient и интерфейс SVGStopElement для элемента stop.

Пример использования линейного градиента:

<defs>

<linearGradient id="MyGradient">

        <stop offset="5%" stop-color="#F60" />

        <stop offset="95%" stop-color="#FF6" />

    </linearGradient>

</defs>

<rect fill="url(#MyGradient)" stroke="black"

stroke-width="5" x="100" y="100"

    width="600" height="200"/>.

Выводимый прямоугольник будет иметь следующий вид:

6.1.11.2. Радиальный градиент

Радиальный градиент определяется с помощью элемента radialGradient. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib, Color.attrib, Gradient.attrib, XLink.attrib и External.attrib, а также  определенные для элемента linearGradient атрибуты gradientUnits, gradientTransform и spreadMethod. Кроме этого, для элемента могут быть заданы атрибуты cx, cy, r,  fx и fy.

Атрибуты cx, cy и r определяют координаты x и y центра и радиус наибольшего круга для радиального градиента.

Атрибуты fx и fy определяют координаты x и y фокальной точки радиального градиента. Градиент выводится таким образом, что 0% окончания градиента соответствует фокальной точке. Если атрибуты не заданы, их значения совпадают соответственно со значениями cx и cy.

Для элемента radialGradient определен интерфейс SVGRadialGradientElement.

Элемент stop для радиального градиента определяет в атрибуте offset расстояние (в процентах) от фокальной точки до края самого большого круга.

Пример использования радиального градиента:

<defs>

    <radialGradient id="MyGradient"

gradientUnits="userSpaceOnUse"

         cx="400" cy="200" r="300" fx="400" fy="200">

        <stop offset="0%" stop-color="red" />

        <stop offset="50%" stop-color="blue" />

        <stop offset="100%" stop-color="red" />

    </radialGradient>

</defs>

<rect fill="url(#MyGradient)" stroke="black"

stroke-width="5" x="100" y="100"

width="600" height="200"/>.  

Выводимый прямоугольник будет иметь следующий вид:

6.1.11.3. Шаблоны

Шаблон используется для заполнения либо объекта, либо его контура с использованием заданного графического объекта, который может быть повторен через заданные интервалы по координатам x и y для покрытия окрашиваемой области.  На шаблон, так же как и на градиент, можно ссылаться с использованием свойств fill или stroke в графическом элементе.

Шаблон определяется с помощью элемента pattern. Для этого элемента можно задавать атрибуты модуля Presentation.attrib,  а также определенные ранее атрибуты viewBox и preserveAspectRatio. Кроме этого, для элемента pattern могут быть заданы атрибуты patternUnits, patternContentUnits и patternTransform.

Атрибуты x, y, width, height указывают, как будет размещаться шаблоны. Эти атрибуты представляют координаты и значения в пространстве координат, определенном комбинацией атрибутов patternUnits и patternTransform.

Атрибуты patternUnits и patternTransform действуют аналогично атрибутам gradientUnits и gradientTransform для элемента linearGradient.

Атрибут patternContentUnits определяет систему координат для содержимого элемента pattern. Он имеет те же значения и действует аналогично атрибуту gradientUnits для элемента linearGradient.

Для элемента pattern определен интерфейс SVGPatternElement.

Пример использования шаблона:

<defs>

    <pattern id="TrianglePattern"

patternUnits="userSpaceOnUse"

         x="0" y="0" width="100" height="100"

         viewBox="0 0 10 10" >

      <path d="M 0 0 L 7 0 L 3.5 7 z"

fill="red" stroke="blue" />

    </pattern>

</defs>

<ellipse fill="url(#TrianglePattern)"

stroke="black" stroke-width="5"  

    cx="400" cy="200" rx="350" ry="150" />.

Выводимый эллипс будет иметь следующий вид:

6.1.12. Клипы и маски в SVG

6.1.12.1. Создание клипов

Клип – эта часть графического элемента, ограниченная заданным контуром. Контур клипа задается с помощью элемента clipPath. Для этого элемента можно задавать атрибуты модулей Core.attrib, Conditional.attrib, Style.attrib, Text.attrib, TextContent.attrib, Font.attrib, Paint.attrib, Color.attrib, Opacity.attrib, Graphics.attrib, Clip.attrib, Mask.attrib, Filter.attrib, Cursor.attrib и External.attrib, а также атрибут transform. Кроме этого, для элемента можно задать атрибут clipPathUnits, который имеет те же значения и действует  аналогично атрибуту gradientUnits для элемента linearGradient.

Элемент clipPath может содержать только следующие элементы: path, text, элементы базовых фигур, а также элемент use, ссылающийся на один из этих элементов.

Элемент clipPath не используется напрямую, а с помощью ссылки на него, задаваемой в атрибуте или свойстве  clip-path того элемента, в котором используется данный клип.

Элементу clipPath в SVG DOM соответствует интерфейс SVGClipPathElement.

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

<defs>

    <radialGradient id="MyGradient"

  gradientUnits="userSpaceOnUse"

     cx="400" cy="200" r="300" fx="400" fy="200">

        <stop offset="0%" stop-color="red" />

        <stop offset="50%" stop-color="blue" />

        <stop offset="100%" stop-color="red" />

     </radialGradient>

     <clipPath id="MyClip">

     <text x="100" y="200" font-size="100pt"

font-family="Times New Roman" fill="none"

font-weight="bold">

  &#x042D;&#x0442;&#x043E;

&#x043A;&#x043b;&#x0438;&#x043F;</text>

     </clipPath>

</defs>

…    

<rect fill="url(#MyGradient)" x="100" y="100" width="600"

height="200" style="clip-path:url(#MyClip)"/>.

Выводимый графический объект будет иметь следующий вид:

6.1.12.2. Использование масок

Цветное изображение в модели RGB можно разделить на три изображения: красная компонента, зеленая компонента и синяя компонента. Для этих компонентов используется также понятие канал (channel): канал R, канал G и канал B. Наряду с этими тремя каналами в практических реализациях модели RGB используется четвертый канал, называемый каналом прозрачности или альфа-каналом. Этот канал определяет прозрачность отдельных пикселей изображения и может изменяться в диапазоне от 0 (прозрачный) до 1 (непрозрачный).   

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

В SVG маска определяется с помощью элемента mask. Так же, как элемент clipPath, элемент mask не используется напрямую, а с помощью ссылки на него с помощью атрибута или свойства mask.

Содержимым элемента mask могут быть любые графические или контейнерные элементы. Эффект использования маски для этих элементов состоит в том, что они выводятся во внеэкранное изображение, которое инициализируется прозрачным черным цветом. Любой графический объект, который ссылается или который использует данную маску, будет выводиться через эту маску.  

Для элемента mask можно задать атрибуты модуля Presentation.attrib, а также атрибуты x, y, width, height, maskUnits и maskContentUnits.

Атрибуты x, y, width и height задают наибольшую возможную прямоугольную область для внеэкранного буфера. По умолчанию значения x и y равны "-10%", а значения width и height "120%".

Атрибуты maskUnits и maskContentUnits могут иметь те же значения и действуют аналогично атрибуту gradientUnits для элемента linearGradient и атрибуту patternContentUnits для элемента pattern.

Элементу mask в SVG DOM соответствует интерфейс SVGMaskElement.

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

<defs>

<linearGradient id="myMaskGradient"

units="userSpaceOnUse">

  <stop offset="0%" stop-color="black"/>

  <stop offset="15%" stop-color="white"/>

  <stop offset="30%" stop-color="black"/>

  <stop offset="45%" stop-color="white"/>

  <stop offset="60%" stop-color="black"/>

  <stop offset="75%" stop-color="white"/>

  <stop offset="90%" stop-color="black"/>

  <stop offset="100%" stop-color="white"/>

</linearGradient>

<mask id="myMask" maskUnits="objectBoundingBox">

  <rect x="20px" y="30px" width="980px"

height="200px" fill="url(#myMaskGradient)"/>

</mask>

</defs>

<g mask="url(#myMask)">

<text x="20px" y="100px" style="fill:red; stroke:none;

  font-family:Arial, sans-serif; font-size:100">

&#x041C;&#x0430;&#x0441;&#x043A;&#x0438;&#x0440;&#x0443;

&#x0435;&#x043C;&#x044B;&#x0439;  

&#x0442;&#x0435;&#x043A;&#x0441;&#x0442;

</text>

</g>.

Выводимый с использованием градиентной маски текст будет иметь следующий вид:

6.1.13. Фильтры в SVG

Использование фильтров заключается в последовательном применении графических операций к исходному графическому объекту для получения результирующего графического объекта, как показано на рисунке:

6.1.13.1. Элемент filter

Используемые фильтры определяются в элементе filter. Для применения фильтров в графическом или контейнерном элементе необходимо задать в свойстве или атрибуте filter этого элемента ссылку на элемент filter.

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

Для элемента filter можно задать атрибуты модуля Presentation.attrib, а также атрибуты x, y, width, height, filterRes, filterUnits  и primitiveUnits.

Атрибуты x, y, width и height задают прямоугольную область, для которой будут применяться фильтры. По умолчанию значения x и y равны "-10%", а значения width и height "120%".

Атрибут filterRes задает ширину и высоту промежуточных изображений в пикселях. По умолчанию, разрешение выбирает процессор SVG, исходя из размера изображения и разрешения экрана дисплея.

Атрибут filterUnits имеет те же значения и действует  аналогично атрибуту gradientUnits для элемента linearGradient. 

Атрибут primitiveUnits задает координатную систему для различных значений длины в примитивах фильтров и для атрибутов, определяющих область действия примитивов фильтров. Его значения и действия те же, что и для атрибута  gradientUnits для элемента linearGradient.

Для элемента filter в SVG DOM определен интерфейс SVGFilterElement.

Ниже приведен краткий обзор имеющихся в SVG фильтров-примитивов.

6.1.13.2. Фильтры для источников света

Для моделирования источников света в SVG определены следующие фильтры-примитивы: feDistantLight, fePointLight и feSpotLight.

Элемент feDistantLight моделирует удаленный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты azimuth и elevation, определяющие координаты источника соответственно в плоскости XY и YZ (по умолчанию значения этих атрибутов равны "0").

Элемент fePointLight моделирует точечный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты x, y и z, определяющие координаты источника в трехмерном пространстве (по умолчанию значения этих атрибутов равны "0").

Элемент feSpotLight моделирует точечный источник света. Помимо атрибутов модуля Core.attrib, для него можно задавать атрибуты x, y, z, pointsAtX, pointsAtY, pointsAtZ, specularExponent и limitingConeAngle.

Атрибуты x, y и z задают координаты источника в трехмерном пространстве (по умолчанию значения этих атрибутов равны "0").

Атрибуты pointsAtX, pointsAtY и pointsAtZ задают координаты точки, на которую направлен источник света (по умолчанию значения этих атрибутов равны "0").

Атрибут specularExponent задает числовое значение, управляющее фокусировкой источника света (по умолчанию значение этого атрибута равно "1").

Атрибут limitingConeAngle задает ограничивающий конус, в который проектируется источник света (если атрибут не задан, ограничивающий конус не используется).

Для элементов feDistantLight, fePointLight и feSpotLight в DOM SVG определены интерфейсы SVGFEDistantLightElement, SVGFEPointLightElement и SVGFESpotLightElement.

Элементы feDistantLight, fePointLight и feSpotLight не используются отдельно, а только как содержимое элементов feDiffuseLighting и feSpecularLighting.

Рассеивание (диффузия) источника света моделируется в SVG с помощью элемента feDiffuseLighting. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также атрибуты color-interpolation-filters, in, lighting-color, surfaceScale, diffuseConstant и kernelUnitLength.

Атрибут color-interpolation-filters задает выбор одной из двух разновидностей реализации модели RGB: модели sRGB (значение "sRGB") или модели линейного RGB (значение "linearRGB"). Атрибут может иметь также значение "auto", при котором пользовательский агент сам выбирает одну из двух моделей (это значение по умолчанию).

Атрибут может иметь одно из следующих значений: "SourceGraphic" – исходный графический элемент, "SourceAlpha" – исходный  графический элемент (только альфа-канал), "BackgroundImage" – фоновое изображение, "BackgroundAlpha" – фоновое изображение (только альфа-канал),  "FillPaint" – значение свойства fill элемента, для которого используется фильтр,  "StrokePaint" – значение свойства stroke элемента, для которого используется фильтр. Кроме того, может быть задана ссылка на один из предыдущих фильтров-примитивов. По умолчанию, значением атрибута in является значение этого же атрибута для предыдущего фильтра-примитива.

Атрибут lighting-color задает цвет источника света. Значением этого атрибута может быть либо цвет источника, либо "currentColor" – для источника, использующего текущий цвет. По умолчанию значение этого атрибута равно "white".

Атрибут surfaceScale задает высоту поверхности (по умолчанию значение этого атрибута равно "1").

Атрибут diffuseConstant задает константу диффузии (по умолчанию – "1").

Атрибут kernelUnitLength задает приращения dx и dy для вычисления поверхности источника (если dy не задано, оно предполагается равным dx). По умолчанию величины dx и dy предполагаются равными "1px".

Фильтр-примитив, моделирующий отражение света, реализован в SVG с помощью  элемента feSpecularLighting. Для этого элемента можно задавать атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также атрибуты color-interpolation-filters, in, lighting-color, surfaceScale, specularConstant , specularExponent и kernelUnitLength.

Атрибуты color-interpolation-filters, in, lighting-color, surfaceScale и kernelUnitLength действуют аналогично соответствующим атрибутам элемента feDiffuseLighting.

Атрибут specularConstant задает константу отражения (по умолчанию – "1"), а атрибут specularExponent – экспоненту отражения (число в диапазоне от 1.0 до 128.0 – чем больше число, тем больше «сияет» изображение). По умолчанию значения обоих атрибутов равны "1".

Для элементов feDiffuseLighting и feSpecularLighting в SVG DOM определены интерфейсы SVGFEDiffuseLightingElement и SVGFESpecularLightingElement.

6.1.13.3. Фильтры смешивания изображений

Элемент feBlend реализует фильтр-примитив, объединяющий два изображения (на уровне пикселей) с использованием различных режимов смешивания. Помимо атрибутов модуля Core.attrib, для этого элемента можно задавать атрибуты x, y, width, height, mode, color-interpolation-filters, result, in и in2.

Атрибуты x, y, width и height задают прямоугольную область действия фильтра (по умолчанию значения атрибутов – "0%", а атрибутов – "100%").

Атрибут mode задает режим смешивания и может иметь одно из следующих значений: "normal" – нормальный режим (это значение по умолчанию), "multiply" – режим умножения, "screen" – режим экрана,  "darken" – режим затемнения и "lighten" –режим осветления.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting.  

Атрибуты in и in2 задают первое и второе смешиваемые изображения. Они действуют аналогично атрибуту in элемента feDiffuseLighting.

Атрибут result присваивает имя данному фильтру-примитиву. Если этот атрибут задан, то имя можно указать в атрибуте in в одном из следующих фильтров-примитивов в данном элементе filter. В противном случае, вывод данного фильтра может быть использован только в качестве ввода для следующего фильтра-примитива в данном элементе filter. 

Элемент feComposite реализует фильтр, выполняющий смешивание (по пикселям) двух входных изображений с использованием операций композиции или арифметических операций. Для этого элемента можно задавать атрибуты модуля Core.attrib,  а также атрибуты color-interpolation-filters, x, y, width, height, in, in2, result, operator, k1, k2, k3 и k4.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting, а атрибуты  x, y, width, height, in, in2 и result – тот же смысл, что и одноименные атрибуты элемента feBlend.

Атрибут operator задает операцию композиции над входными элементами и может иметь одно из следующих значений: "over" – операция «над» (значение по умолчанию),  "in" – операция «в»,  "out" – операция «вне»,  "atop" – операция «вершина», "xor" – операция «исключающее или» и "arithmetic" – арифметическая операция.

Если значение атрибута operator равно "arithmetic", то каждый пиксель  выходного изображения вычисляется по следующей формуле:

result = k1*i1*i2 + k2*i1 + k3*i2 + k4,

где i1 и i2 – пиксели первого и второго входного изображения, а коэффициенты задаются в атрибутах k1, k2, k3 и k4. По умолчанию значения этих атрибутов равны "0".

Элемент feMerge реализует послойный вывод изображения. Слои задаются в дочерних элементах feMergeNode элемента feMerge.

Для элемента feMerge определены атрибуты модуля Core.attrib, а также описанные ранее атрибуты color-interpolation-filters, x, y, width, height, in и result. Для элемента также определены  атрибуты модуля Core.attrib и атрибут in, описывающий входное изображение для данного слоя. Первый элемент feMergeNode в элементе описывает самый нижний слой, а последний – самый верхний слой.

Для элементов feBlend, feComposite,  feMerge и feMergeNode в DOM SVG определены интерфейсы SVGFEBlendElement, SVGFECompositeElement, SVGFEMergeElement и SVGFEMergeNodeElement.

6.1.13.4. Фильтры задания и преобразования цветов

Преобразование цветов выполняется в SVG с помощью элемента feColorMatrix. Этот элемент выполняет следующее матричное преобразование: 

| R' |     | a00 a01 a02 a03 a04 |   | R |

| G' |     | a10 a11 a12 a13 a14 |   | G |

| B' |  =  | a20 a21 a22 a23 a24 | * | B |

| A' |     | a30 a31 a32 a33 a34 |   | A |

| 1  |     |  0   0   0   0   1  |   | 1 |

над значениями цветовых каналов и альфа-канала для каждого пикселя входного графического объекта для получения результирующего объекта.

Для элемента feColorMatrix можно задавать атрибуты модуля Core.attrib,  а также атрибуты color-interpolation-filters, x, y, width, height, in, result, type и values.

Атрибут color-interpolation-filters имеет тот же смысл, что и одноименный атрибут элемента feDiffuseLighting, а атрибуты  x, y, width, height, in и result – тот же смысл, что и одноименные атрибуты элемента feBlend.

Атрибут type задает тип преобразования и может иметь одно из следующих значений (для цветовой модели HSL): "matrix" – должна задаваться полная матрица преобразований (все 20 значений),  "saturate" – должна задаваться насыщенность – S (одно число), "hueRotate" – должен  задаваться угол оттенка – H (одно число) и "luminanceToAlpha" – должна задаваться светимость L (числа не задаются). По умолчанию значение атрибута равно "matrix".

Атрибут values задает значение или значения для заданного в атрибуте type типа преобразования.

Фильтр, реализуемый элементом feComponentTransfer, преобразует каналы для графического объекта следующим образом:

R' = feFuncR(R)

G' = feFuncG(G)

B' = feFuncB(B)

A' = feFuncA(A)

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

Для элемента можно задавать атрибуты модуля Core.attrib,  а также описанные ранее атрибуты color-interpolation-filters, x, y, width, height, in и result.

Содержимым элемента feComponentTransfer являются элементы feFuncR, feFuncG, feFuncB, и feFuncA, описывающие преобразования по цветовым каналам R, G, B и альфа-каналу. Помимо атрибутов модуля Core.attrib, для этих элементов задается обязательный атрибут type и необязательные атрибуты tableValues, slope, intercept, amplitude, exponent и offset.

Атрибут type определяет тип функции преобразования компонента и может иметь одно из следующих значений: "identity" – идентичное преобразование, "table" – табличное преобразование (список из n+1 значений для задания n диапазонов интерполяции), "discrete" – пошаговая функция (список шагов из n значений), "linear" – линейная интерполяция по формуле

C' = slope * C + intercept,

и "gamma" – интерполяция по формуле:

C' = amplitude * pow(C, exponent) + offset.

Значения, необходимые для выполнения преобразований, задаются в атрибуте (type="table" или type="discrete"), атрибутах slope и intercept (type="linear") или атрибутах amplitude, exponent и offset (type="gamma").

Эффект свертывания матрицы (комбинирования пикселей изображения с соседними пикселями) достигается в SVG с помощью элемента feConvolveMatrix. С помощью этого элемента достигаются такие графические эффекты как размытие (blurring) изображения, увеличение резкости (sharpening) изображения, а также фаска (embossing) и рельеф (beveling).

Свертывание матрицы основано на матрице nm, называемой ядром свертывания, которая описывает, как значение данного пикселя во входном изображении комбинируется с его соседними пикселями для получения значения пикселя выходного изображения.

Помимо атрибутов модуля Core.attrib, для элемента feConvolveMatrix задаются описанные выше атрибуты color-interpolation-filters, x, y, width, height, in, result и kernelUnitLength, а также обязательные атрибут order и kernelMatrix, и необязательные атрибуты divisor, bias, targetX, targetY, edgeMode и preserveAlpha.

Атрибут order задает порядок матрицы свертывания в виде двух чисел: количества столбцов n и количества строк m (если количество строк не задано, оно предполагается равным количеству столбцов), а атрибут kernelMatrix задает nm значений элементов матрицы (значения должны быть отделены друг от друга пробелом и/или запятой).

После применения матрицы свертывания к изображению, полученное число может быть разделено на значение, заданное в атрибуте divisor (по умолчанию значение этого атрибута равно "1"). После этого к полученному числу может быть прибавлено значение, заданное в атрибуте bias (по умолчанию значение этого атрибута равно "0").

Атрибуты targetX и targetY определяют положение матрицы свертывания на осях x и y по отношению к заданному пикселю во входном изображении. По умолчанию матрица свертывания располагается по центру над каждым пикселем входного изображения.

Атрибут edgeMode определяет, как расширять входное изображение, если необходимо, когда ядро находится на краю или около края изображения и может иметь одно из следующих значений: "duplicate" – расширение с помощью дублирования цветов на краю входного изображения (значение по умолчанию), "wrap" - расширение с помощью дублирования цветов на другом краю входного изображения и "none" – расширение с нулевыми значениями пикселей.

Атрибут preserveAlpha определяет, будет ли применяться свертка к альфа-каналу (значение "false") или нет (значение "true").

Элемент feFlood создает прямоугольную область, заполненную заданным цветом с заданной прозрачностью. Для этого элемента определены атрибуты модулей Core.attrib, Style.attrib и Color.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result. Помимо этого, атрибуты flood-color и flood-opacity задают цвет и прозрачность области. Для атрибута flood-color может быть задано либо значение "currentColor", либо значение цвета (по умолчанию значение этого атрибута равно "black"). Значение атрибута может меняться в диапазоне от 0 до 1 (по   умолчанию значение этого атрибута равно "1").

Для элементов feColorMatrix, feComponentTransfer, feConvolveMatrix и feFlood в SVG DOM определены интерфейсы SVGFEColorMatrixElement, SVGFEComponentTransferElement, SVGComponentTransferFunctionElement, SVGFEFuncRElement, SVGFEFuncGElement, SVGFEFuncBElement, SVGFEFuncAElement, SVGFEConvolveMatrixElement и SVGFEFloodElement.

6.1.13.5. Фильтры преобразования изображений

Элемент feGaussianBlur осуществляет размытие изображения в соответствии с распределением Гаусса (нормальным распределением). Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибут stdDeviation.

В атрибуте stdDeviation задаются два числа, определяющие стандартное отклонение для нормального закона по осям x и y. Если задано одно значение, то считается, что стандартное отклонение для обеих осей одинаково. По умолчанию значение атрибута равно "0".

Результатом работы элемента feImage является загрузка внутреннего или внешнего изображения. Для этого элемента определены атрибуты модуля Presentation.attrib, а также рассмотренный ранее атрибут preserveAspectRatio.

Элемент feDisplacementMap использует значения пикселей из второго входного изображения для пространственной замены в первом входном изображении. Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in, in2 и  result, а также атрибуты scale, xChannelSelector и yChannelSelector.

Атрибут scale задает масштаб смещения. По умолчанию его значение равно "0", т.е. смещение не выполняется.

Атрибуты xChannelSelector и yChannelSelector указывают, какой канал второго изображения используется для смещения изображения по осям x и y. Эти атрибуты могут иметь значения "R", "G", "B" или "A" соответственно для каналов R, G, B или альфа-канала. По умолчанию значение атрибута равно "A".

Элемент feMorphology утолщает графический объект или делает его тоньше. Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибуты operator и radius.

Атрибут operator задает режим действия элемента: "dilate" – утолщение  или "erode" – сделать объект более тонким (это значение по умолчанию).

В атрибуте radius задаются два числа, определяющие радиус действия операции по осям x и y. Если задано только одно значение, то значение второго радиуса считается равным значению первого радиуса. По умолчанию оба значения равны 0.

Элемент feOffset смещает входное изображение с его текущей позиции на заданный вектор (обычно это используется для создания теней). Для этого элемента определены атрибуты модуля Core.attrib, описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result, а также атрибуты dx и dy.

Атрибуты dx и dy задают смещение входного изображения по осям x и y. По умолчанию значение этих элементов равно "0".

Элемент feTile заполняет заданный прямоугольник повторяющимися копиями входного изображения (как черепица заполняет крышу). Для этого элемента определены атрибуты модуля Core.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result,

Элемент feTurbulence позволяет создавать изображения с использованием функции турбулентности Перлина, что дает возможность синтезировать искусственные текстуры типа облака или мрамора. Для этого элемента определены атрибуты модуля Core.attrib, а также описанные выше атрибуты color-interpolation-filters, x, y, width, height, in и  result. Кроме этого, могут быть заданы элементы type, baseFrequency, numOctaves, stitchTiles и seed.

Атрибут type задает тип используемой функции: "fractalNoise" – фрактальный шум или "turbulence" – турбулентность (это значение по умолчанию).

Атрибут baseFrequency задает два числа – базовые частоты для функции шума по осям x и y. Если задано одно число, то базовые частоты по осям x и y считаются одинаковыми. По умолчанию значение этого атрибута равно "0".

Атрибут numOctaves задает количество октав для функции шума. По умолчанию значение этого атрибута равно "1".

Атрибут stitchTiles может иметь одно из следующих значений: "stitch" – пользовательский агент автоматически подстраивает значения базовых частот для функции шума по осям x и y таким образом, что ширина и высота узла турбулентности содержала бы целое число подобластей для первой октавы, т.е. на границах подобластей будет производиться плавный переход из одной подобласти в другую; "noStitch" – подстройка значений базовых частот не производится (это значение по умолчанию).

Атрибут seed задает начальное значение для генератора псевдослучайных чисел. По умолчанию значение этого атрибута равно "0".

Для элементов feGaussianBlur, feImage, feDisplacementMap, feMorphology, feOffset, feTile и feTurbulence в SVG DOM определены интерфейсы SVGFEGaussianBlurElement, SVGFEImageElement, SVGFEDisplacementMapElement, SVGFEMorphologyElement, SVGFEOffsetElement, SVGFETileElement и SVGFETurbulenceElement.

6.1.13.6. Пример использования фильтров

Пусть задан следующий графический объект:

<rect x="1" y="1" width="198" height="118"

fill="#888888" stroke="blue" />

<g filter="url(#MyFilter)" >

    <g>

     <path fill="none" stroke="#D90000"

stroke-width="10" d="M50,90 C0,90 0,30

50,30 L150,30 C200,30 200,90 150,90 z"/>

      <path fill="#D90000"

            d="M60,80 C30,80 30,40 60,40 L140,40

C170,40 170,80 140,80 z" />

      <g fill="#FFFFFF" stroke="black"

font-size="45" font-family="Verdana">

         <text x="52" y="76">SVG</text>

      </g>

    </g>

</g>.

Для преобразования этого объекта используется следующий набор фильтров-примитивов:

<filter id="MyFilter" filterUnits="userSpaceOnUse"

x="0" y="0" width="200" height="120">

(1)    <feGaussianBlur in="SourceAlpha"

stdDeviation="4" result="blur"/>

(2)   <feOffset in="blur" dx="4"

dy="4" result="offsetBlur"/>

(3)   <feSpecularLighting in="blur" surfaceScale="5"

specularConstant=".75" specularExponent="20"

lighting-color="#bbbbbb" result="specOut">

     <fePointLight x="-5000" y="-10000" z="20000"/>

  </feSpecularLighting>

(4)   <feComposite in="specOut" in2="SourceAlpha"

operator="in" result="specOut"/>

(5)   <feComposite in="SourceGraphic" in2="specOut"

operator="arithmetic" k1="0" k2="1" k3="1" k4="0"

         result="litPaint"/>

(6)   <feMerge>

     <feMergeNode in="offsetBlur"/>

     <feMergeNode in="litPaint"/>

  </feMerge>

</filter>.

Этапы преобразования графического объекта фильтрами-примитивами 1-6 показаны на рисунке:

  

6.1.14. Интерактивность в SVG

Содержимое SVG может быть интерактивным, т.е. реагировать на события, инициированные пользователем, с помощью следующих свойств языка SVG:

  •  возможность задания реакции на события с использованием встроенных в SVG-страницу сценариев;
  •  инициализация гиперссылок к другим фрагментам SVG-страницы и другим SVG- и Web-страницам
  •  изменение формы курсора при перемещении указателя мыши в SVG-странице;
  •  возможность задания анимации элементов SVG-страницы.

6.1.14.1. Использование сценариев

Сценарий определяется внутри элемента script как содержимое CDATA. Для элемента script определены атрибуты модулей Core.attrib, XLink.attrib и External.attrib, а также обязательный атрибут type.

Атрибут type задает используемый язык сценариев (например, для языка JavaScript необходимо задавать значение "text/ecmascript").

Пример задания сценария в SVG-документе:

<script type="text/ecmascript"> <![CDATA[

   function circle_click(evt) {

      var circle = evt.target;

      var currentRadius = circle.getAttribute("r");

      if (currentRadius == 100)

         circle.setAttribute("r", currentRadius*2);

      else

         circle.setAttribute("r", currentRadius*0.5);

   }

 ]]> </script>

<circle onclick="circle_click(evt)"

cx="300" cy="225" r="100" fill="red"/>.

 При щелчке по красному кругу размер круга будет увеличиваться, при втором щелчке будет уменьшаться до первоначального размера, при третьем опять увеличиваться и т.д.

Для элемента script в SVG DOM определен интерфейс SVGScriptElement.

6.1.14.2. Ссылки

Для вставки ссылок в документ используется элемент a. Для этого элемента определены атрибуты модуля Presentation.attrib (в том числе и атрибуты модуля XLink.attrib, задающие местонахождение ссылки). Кроме этого, для элемента a можно задать описанный ранее атрибут transform, а также атрибут target.

Атрибут target, также как в HTML, задает имя окна, в которое будет выводиться документ, определенный в атрибуте xlink:href.

Для элемента a в SVG DOM определен интерфейс SVGAElement.

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

<a xlink:href="http://www.w3.org">

   <ellipse cx="2.5" cy="1.5" rx="2" ry="1"

            fill="red" />

 </a>.

При щелчке мышью по изображению красного эллипса будет выполнен переход в Web-сайту консорциума W3C.

6.1.14.3. Курсор

Элемент cursor используется для определения независимого от платформы пользовательского курсора. Для этого элемента определены атрибуты модулей Core.attrib, Conditional, XLink.attrib (с обязательным атрибутом), External.attrib, а также атрибуты x и y, задающие координаты курсора (по умолчанию значения координат равны "0").

В качестве курсора можно использовать любое изображение (желательно в формате PNG, поскольку этот формат поддерживает канал прозрачности). Ссылка на изображение задается в атрибуте xlink:href.

Для элемента cursor в SVG DOM определен интерфейс SVGCursorElement.

6.1.15. Анимация в SVG

Содержимое документа SVG может быть анимировано одним из следующих способов:

  •  с помощью средств SVG DOM и языков сценариев;  
  •  с помощью средств анимации SVG.

6.1.15.1. Анимация  с помощью средств SVG DOM и языков сценариев

Анимация  с помощью средств SVG DOM и языков сценариев выполняется аналогично рассмотренной ранее анимации для HTML.

Пример использования средств анимации SVG DOM и JavaScript:

<svg width="4cm" height="2cm" viewBox="0 0 400 200"

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

    onload="StartAnimation(evt)" version="1.1">

  <script type="text/ecmascript"><![CDATA[

     var timevalue = 0;

     var timer_increment = 50;

     var max_time = 5000;

     var text_element;

     function StartAnimation(evt) {

       text_element =

evt.target.ownerDocument.getElementById("TextElement");

       ShowAndGrowElement();

     }

     function ShowAndGrowElement() {

       timevalue = timevalue + timer_increment;

       if (timevalue > max_time)

          return;

            scalefactor = (timevalue * 20.) / max_time;

       text_element.setAttribute("transform",

"scale(" + scalefactor + ")");

            opacityfactor = timevalue / max_time;

       text_element.setAttribute("opacity",

opacityfactor);

       setTimeout("ShowAndGrowElement()",

timer_increment)

     }

     window.ShowAndGrowElement = ShowAndGrowElement

  ]]></script>

  <g transform="translate(50,150)"

fill="red" font-size="7">

     <text id="TextElement">SVG</text>

  </g>

</svg>.

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

6.1.15.2. Основные положения анимации в SVG

Элементы анимации в SVG были разработаны в тесном сотрудничестве с рабочей группой по синхронизованному мультимедиа – SYMM (Synchronized Multimedia) консорциума W3C. Эта группа разработала спецификацию интегрированного языка для синхронизованного мультимедиа – SMIL (Synchronized Multimedia Integration Language) для документов XML.

Анимация в SMIL определяется как изменение во времени целевого элемента (точнее, значения заданного атрибута целевого элемента, называемого целевым атрибутом). Анимация определяет соответствие временных отсчетов значениям целевого атрибута.

Анимация определяется временем начала и временем действия. Для каждой анимации задается функция анимации, которая определяет значения целевого атрибута в любой момент времени действия анимации. Можно также определить интервал времени, на котором будет повторяться действие функции или количество повторений действия функции на этом интервале.

Временные значения в SVG и SMIL могут иметь следующий вид:

  •  полное значение – часы:минуты:секунды.доли-секунды;
  •  неполное значение – минуты:секунды.доли-секунды;
  •  счетчик времени – интервал.доли-интерваламетрика  (метрика может иметь одно из следующих значений: h – часы, min – минуты, s – секунды и ms – миллисекунды, если метрика не указана, предполагается значение s).

Во всех временных значениях символ "." и доли-секунды или доли-интервала можно опустить.

Примеры задания временных значений: 02:30:03.25, 22:15:00, 00:10.05, 12:10, 3.2h, 15min, 12.5s, 100ms, 15.

По умолчанию целевой элемент анимации должен быть родителем элемента анимации, однако целевой элемент может быть любым элементом документа, идентифицированным с помощью атрибута id или ссылки.

6.1.15.3. Общие модули атрибутов для элементов анимации в SVG 

Для использования в элементах анимации в SVG определены следующие модули атрибутов: Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib, AnimationAddtion.attrib и AnimationEvents.attrib.

Модуль Animation.attrib фактически является синонимом рассмотренного ранее модуля XLink.attrib 

Модуль AnimationAttribute.attrib содержит атрибуты attributeName и attributeType. Первый атрибут определяет имя целевого атрибута (этот атрибут является обязательным), а второй атрибут – тип целевого атрибута с именем attributeName. Атрибут attributeType может иметь одно из трех значений: "CSS" – определяет, что атрибут является именем свойства CSS;  "XML" – определяет, что атрибут является именем атрибута, определенного в пространстве имен по умолчанию для целевого элемента и "auto" – тип элемента ("XML"или "CSS") определяется пользовательским агентом (это значение по умолчанию).

Модуль AnimationTiming.attrib содержит атрибуты begin, dur, end, min, max, restart, repeatCount, repeatDur и fill.

Атрибуты begin и end определяют время начала и время окончания цикла анимации. Могут быть заданы несколько циклов анимации (в этом случае времена отделяются друг от друга символом ";"). В SVG и SMIL время начала или окончания анимации может иметь один из следующих типов:

  •  тип смещение – задается как временное значение со знаком "+" или "-" относительно времени начала выполнения документа (например, "+3s");
  •  тип база-синхронизации – задается в виде идентификатор.точка-отсчетасмещение, где идентификатор – идентификатор элемента, являющегося базой синхронизации, точка-отсчета – одно из значений: begin или end (синхронизация с началом или концом анимации элемента базовой синхронизации), а смещение (со знаком "+" или "-") задает временное смещение относительно базы-синхронизации (например, "id1.end+1s");
  •  тип событие – задается в виде идентификатор.событиесмещение, где идентификатор – идентификатор элемента, для которого отслеживается событие, событие – имя события, а смещение (со знаком "+" или "-") задает временное смещение относительно момента наступления события  (например, "id2.click+0.5s");
  •  тип повторение – задается в виде идентификатор.repeat("число")смещение, где идентификатор – идентификатор элемента, для которого отслеживается количество повторений анимации, число – количество повторений, а смещение (со знаком "+" или "-") задает временное смещение относительно завершения заданного повторения количества анимации  (например, "id3.repeat('5')+1s");
  •  тип клавиша-доступа  – задается в виде accessKey("клавиша")смещение, где клавиша – клавиша на клавиатуре, которая должна быть нажата, а смещение (со знаком "+" или "-") задает временное смещение относительно момента нажатия клавиши  (например, "accessKey('E')+2s");
  •  тип время – задается в виде "wallclock(время)", где время задается как часы, минуты, секунды  и доли секунды (например, "wallclock(2003-07-28T15:30-08:00)");
  •  неопределенный тип – задается в виде "undefinite" (время начала анимации определяется методами beginElement() или endElement()в интерфейсе SVG DOM ElementTimeControl, либо при реализации ссылки на данный элемент). 

Атрибут dur определяет продолжительность анимации. Продолжительность анимации может задаваться либо как временное значение, либо ключевым словом "indefinite" (бесконечно) – это значение по умолчанию.

Атрибуты min и max задают минимальную и максимальную продолжительность анимации как временные значения.

Атрибут restart задает возможность возобновления анимации и может иметь одно из следующих значений: "always" – анимация может быть возобновлена в любое время (значение по умолчанию), "whenNotActive" – анимация может быть возобновлена, только если в данный момент она не активна и "never" – анимация не может быть возобновлена.  

Атрибут repeatCount задает либо число итераций функции анимации, либо может иметь значение "indefinite" (бесконечное число повторений), а атрибут repeatDur задает либо временное значение для продолжительности повторения функции анимации, либо может иметь значение "indefinite" (бесконечная продолжительность повторения).

Атрибут fill задает режим для значения целевого атрибута после окончания анимации. Когда анимация заканчивается, значение целевого атрибута возвращается к первоначальному значению (значение "remove"), однако можно «заморозить» последнее значение, полученное в результате анимации, для дальнейшего использования в документе (значение "freeze"). Значением по умолчанию является "remove".

Модуль AnimationValue.attrib содержит атрибуты values, calcMode, keyTimes, keySplines, from, to и by.

Атрибут values задает список допустимых значений функции анимации.

Атрибут calcMode задает режим интерполяции для значений функции анимации, заданных в атрибуте values, и может иметь одно из следующих значений: "discrete" – функция анимации переходит от одного значения к другому без интерполяции, "linear" – линейная интерполяция функции анимации (это значение по умолчанию), "paced" – интерполяция с равномерным шагом и "spline" – интерполяция в соответствии с кубической кривой Безье.

Атрибут keyTimes задает разделенный символом ";" список временных значений для управления скоростью анимации. Каждое значение в списке соответствует значению функции анимации в атрибуте values и является числом с плавающей точкой в диапазоне от 0 до 1. Если режим интерполяции – "linear" или  "spline", то первое число в списке должно быть равно 0, а последнее – 1. Если  режим интерполяции –"discrete", то первое число в списке должно быть равно 0, а каждое последующее значение задает время, когда устанавливается соответствующее значение  функции анимации в атрибуте values. Если  режим интерполяции – "paced" или время анимации бесконечно, атрибут игнорируется.

Атрибут keySplines задает разделенный символом ";" набор контрольных точек, связанных со списком в атрибуте keyTimes и определяющих кубическую функцию Безье  для управления скоростью анимации (если значение режима интерполяции не равно "spline", то атрибут игнорируется). Каждая контрольная точка является набором из четырех значений:  x1 y1 x2 y2, описывающих контрольные точки для одного временного сегмента. Значения, заданные в атрибуте keyTimes,  являются в этом случае точками привязки. Значения контрольных точек должны быть в диапазоне от 0 до 1, а количество контрольных точек в атрибуте keySplines должно быть на единицу меньшим, чем в атрибуте keyTimes.

Атрибуты from, to и by задают соответственно начальное значение, конечное значение и шаг анимации. Если задан атрибут values, то эти атрибуты игнорируются.

Модуль AnimationAddtion.attrib содержит атрибуты additive и accumulate.

Атрибут additive определяет режим формирования значений целевого атрибута: "replace" означает,  что значения целевого атрибута во время анимации заменяют начальное значение, а "sum" означает,  что значения целевого атрибута во время анимации добавляются к начальному значению. Значением по умолчанию является "replace".

Атрибут accumulate определяет режим формирования значений целевого атрибута при повторениях итерации: "sum" указывает,  что каждое первое значение целевого атрибута повторения строится на основе последнего значения предыдущей итерации, а "none" указывает,  что каждое первое значение целевого атрибута повторения строится на основе первого значения предыдущей итерации. Значением по умолчанию является "none".

Модуль AnimationEvents.attrib содержит атрибуты onbegin, onend, onrepeat и onload.  

Атрибут onbegin определяет действия, выполняемые при начале анимации графического объекта, а атрибут onend – при окончании анимации графического объекта.  

Атрибут onrepeat определяет действия, выполняемые при первом и последующих повторениях анимации графического объекта.

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

6.1.15.4. Элемент animate 

Элемент animate используется для анимации какого-либо свойства или атрибута элемента. Для этого элемента определены атрибуты модулей Core.attrib, Conditional.attrib, AnimationEvents.attrib, External.attrib, Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib и AnimationAddtion.attrib.

Для элемента animate в SVG DOM определен интерфейс SVGAnimateElement.

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

<rect x="10" y="10" width="400" fill="red" height="300">

  <animate attributeType="CSS" attributeName="opacity"

    from="1" to="0" dur="5s" repeatCount="indefinite"/>

</rect>.

Каждые 5 секунд прозрачность прямоугольника меняется от полностью непрозрачного до полностью прозрачного.

6.1.15.5. Элемент set

Элемент set устанавливает заданное значение атрибута для цикла анимации. Обычно этот элемент используется при анимации свойств и атрибутов, которые нельзя интерполировать, например, строк или булевских значений. Для элемента set определены атрибуты модулей Core.attrib, Conditional.attrib, AnimationEvents.attrib, External.attrib, Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib и атрибут to. Атрибут to определяет значение, присваиваемое заданному атрибуту или свойству.

Для элемента set в SVG DOM определен интерфейс SVGSetElement.

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

<circle cx="60" cy="60" r="30" style="fill: #ff9;

stroke: gray;">

    <animate id="c1" attributeName="r" attributeType="XML"

        begin="0s" dur="4s" from="30"

to="0" fill="freeze"/>

</circle>

<text text-anchor="middle" x="60" y="60"

style="visibility: hidden;">

    <set attributeName="visibility" attributeType="CSS"

        to="visible" begin="4.5s"

dur="1s" fill="freeze"/>  

      &#x041A;&#x043E;&#x043D;&#x0435;&#x0446;!

</text>.

Сначала радиус круга будет уменьшаться до нуля, а затем появится надпись Конец!.

6.1.15.6. Элемент animationMotion

Элемент animateMotion задает движение элемента по траектории, определяемой с помощью контура (path). Для этого элемента определены атрибуты модулей Core.attrib, Conditional.attrib, AnimationEvents.attrib, External.attrib, Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib и AnimationAddtion.attrib, а также атрибуты path, keyPoints и rotate.

Для атрибута calcMode в элементе animateMotion значением по умолчанию является значение "paced".

Атрибут path задает траекторию движения элемента точно так же, как в атрибуте d элемента path.

Атрибут keyPoints задает разделенный символами ";" список значений с плавающей точкой в диапазоне от 0 до 1. Эти значения определяют положения элемента на траектории в моменты времени, соответствующие значениям в атрибуте keyTimes модуля AnimationValue.attrib.

Атрибут rotate задает либо угол поворота в градусах, либо может иметь значение "auto" – объект вращается в соответствии с изменением траектории или значение "auto-reverse" – объект вращается в соответствии с изменением траектории плюс 180 градусов. Значение по умолчанию – "0".

Значения в атрибутах from, by, to и values представляют собой пары координат x и y точек, разделенные запятой и/или пробелом.

Элемент может animateMotion содержать элемент mpath, в котором определяется ссылка на внешний элемент path, определяющий траекторию движения заданного элемента. Элемент может содержать атрибуты модулей Core.attrib, XLink.attrib (атрибут xlink:href должен быть задан обязательно) и External.attrib.

Для элемента animateMotion в SVG DOM определен интерфейс SVGAnimateMotionElement.

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

<path id="path1" d="M100,250 C 100,50 400,50 400,250"

fill="none" stroke="blue" stroke-width="7.06"  />

  <circle cx="100" cy="250" r="17.64" fill="blue"  />

  <circle cx="250" cy="100" r="17.64" fill="blue"  />

  <circle cx="400" cy="250" r="17.64" fill="blue"  />

    <path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"

       fill="yellow" stroke="red" stroke-width="7.06"  >

       <animateMotion dur="6s"

repeatCount="indefinite" rotate="auto" >

        <mpath xlink:href="#path1"/>

     </animateMotion>

</path>.

В результате анимации стрелка на приведенном ниже изображении будет перемещаться от начала до окончания дуги.

6.1.15.7. Элемент animateColor

Элемент animateColor задает изменение цвета во времени. Для этого элемента определены атрибуты модулей Core.attrib, Conditional.attrib, AnimationEvents.attrib, External.attrib, Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib и AnimationAddtion.attrib.

Значения в атрибутах from, by, to и values представляют собой значения цвета.

Для элемента animateColor в SVG DOM определен интерфейс SVGAnimateColorElement.

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

<rect x="10" y="10" width="400" fill="red" height="300"

 stroke-width="20">

   <animateColor attributeType="CSS"

attributeName="fill" values="red;green;blue"

          dur="5s" repeatCount="indefinite" />

</rect>.

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

6.1.15.8. Элемент animateTransform

Элемент animateTransform позволяет анимировать значение атрибута transform в целевом элементе. Для этого элемента определены атрибуты модулей Core.attrib, Conditional.attrib, AnimationEvents.attrib, External.attrib, Animation.attrib, AnimationAttribute.attrib, AnimationTiming.attrib, AnimationValue.attrib и AnimationAddtion.attrib, а также атрибут type.

Атрибут type задает тип преобразования и может иметь одно из следующих значений: "translate" – перемещение (это значение по умолчанию), "scale" масштабирование, "rotate" – вращение, "skewX" – наклон по оси x и "skewY" – наклон по оси y.

Значения в атрибутах from, by, to и values зависят от типа преобразования:

  •  для типа "translate" – это значения tx [ty] (перемещения по осям x и y);
  •  для типа "scale" – это значения sx [sy] (масштаб по осям x и y);
  •  для типа "rotate" – это значения угол-вращения [cx cy] (вращение вокруг заданной оси);
  •  для типов "skewX" и "skewY" – это значения угла-наклона (угол наклона по соответствующей оси).

Для элемента animateTransform в SVG DOM определен интерфейс SVGAnimateTransformElement.

Пример использования атрибута animateTransform:

<text id="TextElement" x="100" y="100"

font-family="Verdana" font-size="35.27">

    &#x041F;&#x0440;&#x0438;&#x0432;&#x0435;&#x0442;!

    <animateTransform attributeName="transform"

attributeType="XML" type="rotate"

         from="0 300 200" to="360 300 200"

         begin="0s" dur="6s" fill="freeze" />

    <animateTransform attributeName="transform"

attributeType="XML" type="scale"

         from="1" to="3" additive="sum"

         begin="0s" dur="6s" fill="freeze" />

</text>.

Графический объект (текст "Привет!") повернется на 360 градусов, одновременно увеличиваясь в размере в три раза.

 

 

Файл: file:///web/1/5fan/public_html/www/files/13/5fan_ru_69048_366268b1a9f42b3b4894b9117ff15d26.doc   Создан: 2008-04-11T12:42:00Z Модифицирован: 2008-04-11T12:42:00Z     Автор:


 

А также другие работы, которые могут Вас заинтересовать

29357. Алгоритм перевода выражений в польскую запись 37.5 KB
  При работе семантических программ широко используется набор данных с организацией в виде стека. Операнды переписываются в выходную строку а операторы заносятся в стек. В зависимости от приоритета операторов при записи в стек оператор может вытолкнуть из стека другой оператор который последовательно записывается в выходную строку. Работа со стеком организуется так:1.
29359. Машинно-независимая оптимизация линейных участков программ 26.5 KB
  Покажем простейшие преобразования линейных и циклических участков для тетрадной формы программ:Машиннонезависимая оптимизация линейных участков программЛинейным участком программы называется последовательность операцийкоманд которая не содержит условных переходов возможно кроме последней операции. Для оптимизации линейных участков в простейшем случае используется два основных преобразования:1. В списке тетрад выделит границы участков включающих вычисления выражений по операторам присвоения;2.
29360. Машинно-независимая оптимизация циклических участков программ 28 KB
  Рассмотрим возможные преобразования над цикличными участками покажем на примере констрии цикла с заданным количеством повторения.В языке Паскаль такая циклическая конструкция имеет следующий вид: for i: =a to b dobeginтело циклаend;В бейсике: for i =a to b step Sтело циклаnext iв таких конструкциях а и b – границы изменения переменной циклаНад подобными конструкциями выполняются следующие оптимизационные преобразования:1. вынесение из тела цикла операций операций которые не измен. в теле цикла;2.
29361. Генерация объектного кода для тетрадной формы представления программ 99.5 KB
  последовательность команд загруженных в фиксированные ячейки памяти2. последовательность перемещенных машинных команд3. Предположим что сумматор может выполнять 4 арифметические операции а в целом система команд также включает еще 2 команды: загрузки сумматора из памяти и сохранение результатов в память.Систему команд такой машины можно представить следующим образом:При выполнении любой из первых двух команд содержимое источника копируется в приемник а при выполнении оставшихся 4 команд содержимое ячейки памяти не изменяется.
29362. Генерация объектного кода по семантическому дереву 52.5 KB
  Существует 3 формы объектного кода1. Чтобы показать процесс генерации кода можно рассмотреть теоретическую вычислительную машину с одним сумматором и неограниченной памятью.Генерация кода осуществляется для программы представленной в некоторой внутренней форме наиболее удобной из которых для генерации кода является список тетрад.
29363. Машинно – зависимая оптимизация объектного кода в языковых процессорах САПР 25 KB
  В самом простом случае машиннозависимая оптимизация заключается в удалении из сформированной последовательности команд избыточных команд загрузки и чтения. Если сложение является коммутативной операцией то последовательность команд LOAD OP1 можно заменить LOAD OP2 ADD OP2 = ADD OP1 2. Если умножение является коммутативной операцией то последовательность команд LOAD OP1 можно заменить LOAD OP2 MULT OP2 = MULT OP1 Эти 2 правила основаны на свойстве коммутативности операций и обеспечивают перестановку местами операндов в соответствующих...
29364. Хеш – адресация в информационных таблицах 51.5 KB
  В основе организации таблиц с хешадресацией лежит процедура хеширования. Хеширование – преобразование символьного имени идентификатора в числовой индекс элемента таблицы с помощью простых арифметических и логических операций.Конкретный способ хеширования задает хешфункция.
29365. Методы вычисления хеш-функции 24 KB
  Хорошая хешфункция распределяет вычисляемые индексы элементов в таблице равномерно по всей таблице чтобы уменьшить количество возникающих коллизий. Лучший результат дает использование в качестве хешфункции кода последнего символа имени.В трансляторах хешфункция является более сложной и зависит как от кодов внутреннего представления символов имени так и от его длины.