Масштабируемая векторная графика (Scalable Vector Graphics)

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

Показывать лекцию целиком
Внимание! Для работы с этой лекцией необходимы учебные файлы, которые Вы можете загрузить здесь.

Введение в интерактивность SVG - графики

SVG - графика поддерживает широкий диапазон средств взаимодействия с пользователем. Их можно условно разделить на три категории:

  • Гиперссылки для связывания SVG - документов между собой, а также между HTML - страницами и другими файлами.
  • События, которые также можно разделить на события мыши, клавиатуры и события документа в целом.
  • Комплексные приложения, содержащие скрипты с использованием JavaScript и DOM.
    •

    В качестве примера из последней категории, можно привести SVG - тетрисНа диске, прилагаемом к книге, вы найдете также SVG - версии сапера и пасьянса (Lecture12\Games) (рис. 12.1):

    (рис 12.1) SVG - тетрис для браузера Mozilla Firefox. Пример svgtetris.svg (http://www.mozilla.org/projects/svg/)

    Базовые средства интерактивности (масштабирование, перетаскивание) поддерживает сам плейер Adobe SVG - Viewer. Однако и эти свойства могут быть включены в программную часть SVG - документа.

    Гиперссылки

    Одна из наиболее распространенных форм интерактивности - это переходы по гиперссылкам. Так же, как и в HTML, для создания ссылки используется элемент (тег) <a>. В SVG - графике используется атрибут xlink:href для указания адреса ссылки. Все объекты, содержащиеся внутри элемента <a>, представляют собой содержимое ссылки:

    <a xlink:href="http://www.intuit.ru">
<rect x="15" y="60" width="100" height="30"
         fill="#eeff99" stroke="#ff9900" stroke-width="5" rx="10" ry="10"/>
<text x="40" y="80" 
      font-size="16" fill="#990000">
      INTUIT</text>
</a>

    В этом примере областью гиперссылки будет прямоугольник вместе с текстом. В табл. 12.1 приводятся примеры использования гиперссылок.

    Гиперссылки. Атрибут xlink:href.
    № Код Описание
    12.1.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="315" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
       Лекция 12. Интерактивность</title>
     <desc>
          Пример linking1.svg
     </desc>
<!-- Первая ссылка -->
<a xlink:href="http://www.intuit.ru">
<text x="15" y="25" font-family="Times New Roman" 
      font-size="22" fill="black">
      ИНТЕРНЕТ УНИВЕРСИТЕТ</text>
<text x="15" y="40" font-family="Times New Roman" 
      font-size="14" fill="#ff9900">
       ИНФОРМАЦИОННЫХ ТЕХНОЛОГИЙ</text>
</a>
<!-- Вторая ссылка -->
<a xlink:href="http://www.intuit.ru">
<rect x="15" y="60" width="100" height="30"
         fill="#eeff99" stroke="#ff9900" 
         stroke-width="5" rx="10" ry="10"/>
<text x="40" y="80" 
      font-size="16" fill="#990000">
      INTUIT</text>
</a>
<!-- Третья ссылка -->
<a xlink:href="http://www.intuit.ru">
 <image x="15" y="110" width="285" height="52" 
      xlink:href="INTUIT_logo.gif"/>
</a>
</svg>
    		 Все три ссылки ведут на веб-сайт www.intuit.ru. Первая ссылка представляет собой два элемента текст, причем вся площадь, занимаемая текстом, представляет собой область ссылки. Во втором случае гиперссылка содержит прямоугольник и текст. Третья ссылка использует локальный рисунок "INTUIT_logo.gif" в качестве изображения.
    Вид в браузере
    № Код Описание
    12.1.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="160" height="380"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 12. Интерактивность</title>
     <desc>
          Пример linking2.svg
     </desc>
<!-- Первая ссылка -->
<a xlink:href="sea1.jpg">
 <image x="20" y="20" width="116" height="78" 
      xlink:href="small_sea1.jpg"/>
<text x="20" y="110" font-family="Times New Roman" 
      font-size="12" fill="indigo">
       Восточное побережье</text>
</a>
<!-- Вторая ссылка -->
<a xlink:href="sea2.jpg">
 <image x="20" y="140" width="116" height="78" 
      xlink:href="small_sea2.jpg"/>
<text x="20" y="230" font-family="Times New Roman" 
      font-size="12" fill="indigo">
       Западное побережье</text>
</a>
<!-- Третья ссылка -->
<a xlink:href="sea3.jpg" target="new">
 <image x="20" y="260" width="116" height="78" 
      xlink:href="small_sea3.jpg"/>
<text x="20" y="350" font-family="Times New Roman" 
      font-size="12" fill="indigo">
       Южное побережье</text>
</a>
</svg>
    		 SVG - документ содержит эскизы фотографий, по нажатию на которые открываются большие изображения. Например, первая ссылка содержит изображение "small_sea1.jpg", по нажатию на которое открывается большое изображение "sea1.jpg ". Первые две ссылки открываются в родительском окне, последняя - в новом (атрибут target="new" ).
    Вид в браузере
    № Код Вид в браузере
    12.1.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 12. Интерактивность</title>
     <desc>
          Пример linking3.svg
     </desc>
<rect x="5" y="5" width="190" height="90"
         fill="none" stroke="blue" stroke-width="2"></rect>
<!-- Первая ссылка -->
<a xlink:href="C:\WINDOWS\explorer.exe">
 <image x="15" y="15" width="32" height="32" 
      xlink:href="explorerIcon.png"/>
<text x="15" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Проводник</text>
</a>
<!-- Вторая ссылка -->
<a xlink:href="C:\WINDOWS\regedit.exe">
 <image x="75" y="15" width="32" height="32" 
      xlink:href="regeditIcon.png"/>
<text x="75" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Редактор</text>
<text x="75" y="70" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       реестра</text>
</a>
<!-- Третья ссылка -->
<a xlink:href="C:\WINDOWS\system32\dxdiag.exe">
 <image x="125" y="15" width="32" height="32" 
      xlink:href="dxdiagIcon.png"/>
<text x="125" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Средство</text>
<text x="125" y="70" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       диагностики</text>
</a>
</svg>
    Описание
    Запуск проводника, редактора реестра и средства диагностики Direct X на локальном компьютере.
    № Код Вид в браузере
    12.1.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title> Лекция 12. Интерактивность</title>
     <desc>
          Пример linking4.svg
     </desc>
<rect x="5" y="5" width="190" height="90"
         fill="none" stroke="blue" stroke-width="2"></rect>
<!-- Первая ссылка -->
<a xlink:href="C:\WINDOWS\explorer.exe">
 <image x="15" y="15" width="32" height="32" 
      xlink:href="explorerIcon.png">
 <animateTransform attributeName="transform" attributeType="XML" 
               type="rotate" from="0, 31, 31"
to="360, 31, 31" begin="0" dur="1s" repeatCount="indefinite" />
</image>
<text x="15" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Проводник</text>
</a>
<!-- Вторая ссылка -->
<a xlink:href="C:\WINDOWS\regedit.exe">
 <image x="75" y="15" width="32" height="32" 
      xlink:href="regeditIcon.png">
  <animateTransform attributeName="transform" attributeType="XML" 
               type="rotate" from="0, 91, 31"
to="360, 91, 31" begin="0" dur="1s" repeatCount="indefinite" />
</image>
<text x="75" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Редактор</text>
<text x="75" y="70" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       реестра</text>
</a>
<!-- Третья ссылка -->
<a xlink:href="C:\WINDOWS\system32\dxdiag.exe">
 <image x="125" y="15" width="32" height="32" 
      xlink:href="dxdiagIcon.png">
   <animateTransform attributeName="transform" attributeType="XML" 
               type="rotate" from="0, 141, 31" to="360, 141, 31" 
               begin="0" dur="1s" repeatCount="indefinite" />
</image>
<text x="125" y="60" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       Средство</text>
<text x="125" y="70" font-family="Times New Roman" 
      font-size="10" fill="indigo">
       диагностики</text>
</a>
</svg>
    Описание
    Гиперссылки представляют собой анимированные изображения.

    События мыши (Mouse Events)

    События мыши происходят при манипуляциях курсора мыши над объектами. В SVG - графике доступны следующие события:

  • mouseover - происходит при помещении курсора над объектом.
  • mousemove - происходит при перемещении курсора в области объекта
  • mousedown - происходит при нажатии кнопки мыши над объектом.
  • mouseup - происходит при нажатии и отпускании кнопки мыши над объектом.
  • mouseout - происходит при покидании курсора области объекта.
    •

    Наиболее привычными являются события mousedown и mouseup. События mouseover и mouseout чаще всего используются для изменения вида объекта в зависимости от действий пользователя. В табл. 12.2 приводятся примеры применения событий мыши.

    События мыши.
    № Код Вид в браузере
    12.2.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents1.svg
     </desc>
     <rect x="5" y="5" width="190" height="90"
         fill="none" stroke="green" stroke-width="2"/>
     <rect x="20" y="20" width="100" height="50"
         fill="orange">
     <set  attributeName="fill" to="red"
      begin="mouseover" end="mouseout"/>
     </rect>
</svg>
    Описание
    При наведении курсора на прямоугольник он становится красным. При выходе курсора из области прямоугольника цвет становится прежним.
    № Код Вид в браузере
    12.2.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="50"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents2.svg
     </desc>
     <rect x="5" y="5" width="290" height="40"
         fill="none" stroke="green" stroke-width="2"/>
     <text x="15" y="30" 
      font-size="14" fill="orange">
      Наведите мышь и щелкните!
<set attributeName="font-size"  to="20"
      begin="mouseover" end="mouseout"/>
<set attributeName="fill"  to="red"
      begin="mousedown" end="mouseup"/>
</text>
</svg>
    Описание
    При наведении курсора текст увеличивается, при нажатии левой кнопки мыши он становится красным.
    № Код Вид в браузере
    12.2.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents3.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="105" y="100" 
      font-size="11">
      Изменить цвет</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill" to="red"
      begin="changeColor.mouseover" end="changeColor.mouseout"/>
</text>
</svg>
    Описание
    При описании элемента эллипс задается атрибут id="changeColor". Для текста интерактивность задается посредством событий mouseover и mouseout, привязанных к элементу эллипс через его id. В результате цвет текста меняется при наведении курсора на элемент эллипс.
    № Код Вид в браузере
    12.2.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents4.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="80" y="100" 
      font-size="11">
      Изменить цвет и шрифт</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill" to="red"
      begin="changeColor.mouseover" end="changeColor.mouseout"/>
<set attributeName="font-size" to="24"
      begin="changeColor.mouseover" end="changeColor.mouseout"/>
</text>
</svg>
    Описание
    Изменение цвета и размера шрифта при наведении курсора. События связываются с элементом эллипс через его атрибут id.
    № Код Вид в браузере
    12.2.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents5.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="80" y="100" 
      font-size="11">
      Изменить цвет и шрифт</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill" to="red"
      begin="changeColor.mousedown" end="changeColor.mouseup"/>
<set attributeName="font-size" to="24"
      begin="changeColor.mousedown" end="changeColor.mouseup"/>
</text>
</svg>
    Описание
    Изменение цвета и размера шрифта при нажатии левой кнопки мыши. События связываются с элементом эллипс через его атрибут id.
    № Код Вид в браузере
    12.2.6 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents6.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="80" y="100" 
      font-size="11">
      Изменить цвет и шрифт</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill" to="red"
      begin="changeColor.mousemove" end="changeColor.mouseout"/>
<set attributeName="font-size" to="24"
      begin="changeColor.mousemove" end="changeColor.mouseout"/>
</text>
</svg>
    Описание
    Демонстрация события mousemove. Шрифт и его цвет остаются измененным, пока курсор находится в области эллипса.
    № Код Вид в браузере
    12.2.7 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents7.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="80" y="100" 
      font-size="11">
      Изменить цвет и шрифт</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill" to="red"
      begin="changeColor.click" end="changeColor.mouseout"/>
<set attributeName="font-size" to="24"
      begin="changeColor.click" end="changeColor.mouseout"/>
</text>
</svg>
    Описание
    Демонстрация события click. Шрифт и его цвет изменяются при нажатии и отпускании кнопки мыши. После покидания курсором области эллипса исходные значения восстанавливаются.
    № Код Вид в браузере
    12.2.8 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="120"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример mouseEvents8.svg
     </desc>
     <rect x="5" y="5" width="290" height="110"
         fill="none" stroke="green" stroke-width="2"/>
     <!-- Кнопка с подписью-->
<ellipse id="changeColor" cx="135" cy="70"  rx="30" ry="15" 
         fill="pink" stroke="red" stroke-width="5"/>
<text x="80" y="100" 
      font-size="11">
      Изменить цвет и шрифт</text>
<!--Изменяемая надпись-->
<text x="90" y="30" 
      font-size="14" fill="blue">
      SVG - графика
<set attributeName="fill"  to="red"
      begin="changeColor.click" end="changeColor.mouseout"/>
<set attributeName="font-size"  to="24"
      begin="changeColor.click" />
</text>
</svg>
    Описание
    Демонстрация сочетаний событий click и mouseout. При нажатии и отпускании левой кнопкой мыши размер текста и его цвет изменяются. При выходе курсора за область эллипса восстанавливается исходный цвет.

    События клавиатуры (Keyboard Events)

    В SVG - документы можно встраивать реакцию на нажатие клавиш. В табл. 12.3 приводятся такие примеры.

    События клавиатуры.
    № Код Вид в браузере
    12.3.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример KeyboardEvents1.svg
     </desc>
     <rect x="5" y="5" width="190" height="90"
         fill="none" stroke="green" stroke-width="2"/>
     <rect x="20" y="20" width="100" height="50"
         fill="orange">
<animate attributeName="fill" from="orange" to="red" 
         begin="accessKey(1)" dur="3s" fill="remove" />
     </rect>
</svg>
    Описание
    Анимация изменения цвета начинает воспроизводиться при нажатии на клавиши "1".
    № Код Вид в браузере
    12.3.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример KeyboardEvents2.svg
     </desc>
     <rect x="5" y="5" width="190" height="90"
         fill="none" stroke="green" stroke-width="2"/>
     <rect x="20" y="20" width="100" height="50"
         fill="orange">
     <animate attributeName="opacity" from="1" to="0" 
              begin="accessKey(2)" dur="3s" fill="remove"/>
     </rect>
</svg>
    Описание
    Анимация изменения прозрачности начинает воспроизводиться при нажатии на клавиши "2".
    № Код Вид в браузере
    12.3.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример KeyboardEvents3.svg
     </desc>
     <rect x="5" y="5" width="190" height="90"
         fill="none" stroke="green" stroke-width="2"/>
     <rect x="20" y="20" width="100" height="50"
         fill="orange">
     <animateTransform attributeName="transform" 
               type="rotate" from="0,100,50" to="360,100,50" 
               begin="accessKey(3)" dur="3s"/>
     </rect>
</svg>
    Описание
    Анимация вращения начинает воспроизводиться при нажатии на клавиши "3".

    Использование скриптов

    SVG - документы поддерживают скриптовые языки (в частности, JavaScript), которые позволяют создавать сложные веб-интерфейсы и приложения. Скрипт может выполняться в момент загрузки документа или в результате выполнения пользователем какого-либо события, например, щелчка мыши. Различают следующие события:

  • onload - происходит в момент загрузки документа.
  • onclick - происходит при нажатии и отпускании кнопки мыши в одной и той же области экрана.
  • onactivate - происходит при переключении фокуса ввода на элемент.
    •

    Все события мыши, рассмотренные нами ранее, сохраняют свое значение, в их названиях лишь добавляется приставка on: onmousedown, onmouseover, onmousemove, onmouseup, onmouseout.

    Для работы с элементами и атрибутами используются следующие методы:

  • getElementById - обращение к элементу по его id
  • getStyle - получение содержимого атрибута style.
  • setProperty - установка отдельного свойства атрибута style.
  • getAttribute - получение значения атрибута данного элемента.
  • setAttribute - установка значения атрибута.
  • cloneNode - создание нового узла документа на основании существующего.
    •

    Для помещения кода в SVG - документ применяется элемент script:

    .......
<script>
 <![CDATA[
   <!--Код  находится здесь-->
 ]>
</script >
.........

    Допускается применение внешних файлов с кодом. Для помещения такого файла в SVG - документ используется следующий синтаксис:

    .......
< script xlink:href="myScript.js" language="JavaScript"/>
..........

    Здесь помещена ссылка на файл myScript.js.

    Все остальные свойства скриптового языка - переменные, операторы, функции, поддерживаются SVG - графикой в полной мере. По сути, можно абстрагироваться от SVG -основы документа и работать с его содержимым как с обычной HTML - страницей. В таблице 12.4 приводятся примеры скриптовЕсли вы не знакомы с JavaScript, то понимать эти примеры будет сложно. Для быстрого вникания в суть можно проработать небольшие пособия по JavaScript и DOM: (http://www.xml.nsu.ru/) .

    Интерактивность со скриптами.
    № Код Вид в браузере
    12.4.1 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="250"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script1.svg
     </desc>
      <!-- Определение ECMAScript для изменения размера окружности по щелчку -->
  <script type="text/ecmascript"> <![CDATA[
    function circle_click(evt) {
      var circle = evt.target;
      var currentRadius = circle.getAttribute("r");
      if (currentRadius == 50)
        circle.setAttribute("r", currentRadius*2);
      else
        circle.setAttribute("r", currentRadius*0.5);
    }
  ]]> </script>
  <!-- Окружность с обработчиком события -->
  <circle onclick="circle_click(evt)" cx="150" cy="125" r="50"
          fill="red"/>
</svg>
    Описание
    Изменение размера окружности по щелчку. ECMAScript - это интерпретируемый язык программирования, стандартизированный международной организацией ECMA. JavaScript, JScript и ActionScript являются расширением стандарта ECMA-262.
    № Код Вид в браузере
    12.4.2 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script2.svg
     </desc>
<!-- Вставка JavaScript -->
<script type="text/javascript">
<![CDATA[
function changeColor(evt)
{
var redValue,greenValue,blueValue;
var targetshape= evt.getTarget();
redValue = Math.round(Math.random()*255);
greenValue = Math.round(Math.random()*255);
blueValue = Math.round(Math.random()*255);
targetshape.setAttribute("fill",
                         "rgb(" + redValue + 
                         "," + greenValue + 
                         "," + blueValue + 
                         ")");
}
// ]]></script>
<rect x="5" y="5" width="190" height="190"
         fill="none" stroke="green" stroke-width="2"/>
<!-- Окружность, цвет которой будет меняться случайным образом -->
<circle cx="100" cy="100" r="75" fill="blue" onclick="changeColor(evt)" />
</svg>
    Описание
    Изменение случайным образом цвета окружности при щелчке на ней мышью.
    № Код Вид в браузере
    12.4.3 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="240"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>Лекция 12. Интерактивность</title>
     <desc>
          Пример script3.svg
     </desc>
<!-- Вставка JavaScript -->
<script type="text/javascript">
<![CDATA[
 function ChangeColor()
      {
          var redValue,greenValue,blueValue,rgb;
          redValue = Math.round(Math.random()*255);
          greenValue = Math.round(Math.random()*255);
          blueValue = Math.round(Math.random()*255);
        rgb="rgb("+redValue +","+greenValue+","+blueValue +")";
        return rgb;
      }
   function ValueColor(click_evt)
      {
        var svgdoc,ValueRGB,HexValueRGB,
            hex,hredValue,hgreenValue,
            hgblueValue,DataOutput;
        svgdoc=click_evt.target.ownerDocument;
        // Вызываем функцию ChangeColor:
        ValueRGB=ChangeColor();
        // Вычисляем шестнадцатеричные значения цвета:
        hex=ValueRGB.substring(4,ValueRGB.length-1);
        hex=hex.split(",");
        hredValue=parseInt(hex[0]).toString(16).toUpperCase();
        hredValue=(hredValue.length==1)?"0"+hredValue:hredValue;
        hgreenValue=parseInt(hex[1]).toString(16).toUpperCase();
        hgreenValue=(hgreenValue.length==1)?"0"+hgreenValue:hgreenValue;
        hgblueValue=parseInt(hex[2]).toString(16).toUpperCase();
        hgblueValue=(hgblueValue.length==1)?"0"+hgblueValue:hgblueValue;
        HexValueRGB="#"+hredValue+hgreenValue+hgblueValue;
        DataOutput=ValueRGB+" | "+HexValueRGB;
        // Изменяем цвет окружности и выводим надпись:
        click_evt.target.style.setProperty("fill",ValueRGB,"");
        svgdoc.getElementById("Output").firstChild.data=DataOutput;
      }
// ]]></script>
<rect x="5" y="5" width="190" height="230"
         fill="none" stroke="green" stroke-width="2"/>
<!-- Окружность, цвет которой будет меняться случайным образом -->
<circle cx="100" cy="100" r="75" 
        fill="blue" onclick="ValueColor(evt)" />
<text id="Output" x="10" y="200" class="t2" 
      fill="green" font-size="14px">
       </text>
</svg>
    Описание
    Изменение случайным образом цвета окружности при щелчке на ней мышью. Индекс цвета в десятичной и шестнадцатеричной формах выводятся в текстовое поле.
    № Код Вид в браузере
    12.4.4 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="300" height="250"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример DragAndDrop.svg
     </desc>
  <script type="text/ecmascript"> <![CDATA[
    var click = false, object =""
var x_obj = 0, y_obj = 0, x_trans = 0, y_trans = 0
var appui=false
//Установка новых координат объекта при щелчке.
function clicked(evt)
{
      click = true
      object = evt.target
      trans = evt.target.getAttributeNS(null , "transform")
      trans = trans.substring(10,trans.length - 1)
      trans = trans.split(",")
      x_trans = trans[0] - 0
      y_trans = trans[1] - 0
      x_obj = evt.screenX - 0
      y_obj = evt.screenY - 0
}
//Перемещение объекта
function move_object(evt)
{
if (click)
     {
        xm = evt.screenX - 0
        ym = evt.screenY - 0
       object.setAttributeNS(null,
                            "transform",
                            "translate("+( x_trans + xm - x_obj) + ",
                            " + ( y_trans + ym - y_obj) +")")
     }
}
  ]]> </script>
<g onmousedown="clicked(evt)" onmousemove="move_object(evt)" 
   onmouseup="click=false">
<rect transform="translate(20,20)" x="10" y="10" 
      width="180" height="80" fill="green"/>
<polygon transform="translate(20,20)" points="20,20 180,20 20,90" 
         fill="blue"/>
<circle transform="translate(20,20)" cx="90" cy="60"  
        r="25" fill="red" />
<text transform="translate(150,150)" font-family="Comic Sans MS" fill="red" 
      font-size="16">
    Drag and drop</text>
</g>
</svg>
    Описание

    Операция Drag and Drop - перетаскивание объектов. Надпись можно выделять и перетаскивать. На диске, прилагаемом к книге, вы найдете пример перетаскивания объектов с возможностью изменения размера изображений (рис. 12.2):

    (рис 12.2) Пример "sydney.svg"
    № Код Описание
    12.4.5 
    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>
      Лекция 12. Интерактивность</title>
     <desc>
          Пример Menu.svg
     </desc>
 <a xlink:href="">
    <text x="30" y="30" style="fill:red"
      onclick="svgDocument.rootElement.setAttribute('zoomAndPan','disable')">
      Отключить масштаб
      <set attributeName="fill" attributeType="CSS" to="blue"
      begin="mouseover"/>
      <set attributeName="fill" attributeType="CSS" to="red"
      begin="mouseout"/>
    </text>
  </a>
  <a xlink:href="">
    <text x="30" y="60" style="fill: red"
      onclick="svgDocument.rootElement.setAttribute('zoomAndPan','magnify')">
      Включить масштаб
      <set attributeName="fill" attributeType="CSS" to="blue"
      begin="mouseover"/>
      <set attributeName="fill" attributeType="CSS" to="red"
      begin="mouseout"/>
    </text>
  </a>
</svg>
    		 Управление контекстным меню, отображаемым для данного документа плагином "Adobe SVG Viewer". Отключение и включение доступности масштаба.
    Вид в браузере

    Мы рассмотрели простые примеры, демонстрирующие возможности SVG. Сложность приложений, использующих SVG - графику, ограничена лишь рамками JavaScript, DOM, а также фантазией и знаниями разработчика.

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^