Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1746 / 325 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Специальности: Программист
Лекция 2:

Основные фигуры SVG – графики

Вертикальный порядок последовательности объектов

До этого момента мы рассматривали SVG – документы, содержащие один объект. При расположении нескольких объектов в одном документе важен их вертикальный порядок (z–order). Представим себе, что у нас есть код, в котором создаются прямоугольник ( rect ), полигон ( polygon ) и окружность ( circle ):

<rect x="10" y="10" width="180" height="80"  fill="green"/>
<polygon points="20,20 180,20 20,90" fill="blue" />
<circle cx="90" cy="60"  r="25" fill="red" />

Строка кода, описывающая окружность, располагается самой последней. На рисунке эти фигуры будут располагаться в обратном порядке – так, окружность будет самой первой в стопке объектов (рис. 2.7):

Вертикальный порядок последовательности элементов

Рис. 2.7. Вертикальный порядок последовательности элементов

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

Таблица 2.7. Последовательности изображений.
Код Вид в браузере
2.7.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>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример sequence1.svg
     </desc>
      <rect x="10" y="10" width="180" height="80"  fill="green"/>
     <polygon points="20,20 180,20 20,90" fill="blue" />
     <circle cx="90" cy="60"  r="25" fill="red" />
</svg>
Листинг 2.7.1. Пример sequence1.svg
polygone
Описание
Последовательность трех фигур – прямоугольника, полигона и окружности.
Код Вид в браузере
2.7.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>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример sequence2.svg
     </desc>
     <circle cx="45" cy="34"  r="25" fill="none"
          stroke="darkblue" stroke-width="4"/>
     <circle cx="100" cy="34"  r="25" fill="none"
          stroke="black" stroke-width="4"/>
     <circle cx="155" cy="34"  r="25" fill="none"
          stroke="red" stroke-width="4"/>
     <circle cx="72" cy="67"  r="25" fill="none"
          stroke="yellow" stroke-width="4"/>
     <circle cx="127" cy="67"  r="25" fill="none"
          stroke="green" stroke-width="4"/>
</svg>
Листинг 2.7.2. Пример sequence2.svg
polygone
Описание
Эмблема олимпийского движения. Следует обратить внимание на перекрытие колец.
Код Вид в браузере
2.7.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>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример sequence3.svg
     </desc>
       <!-- Небо -->
     <rect x="0" y="0" width="200" height="70"  fill="skyblue"/>
     <!--Кольца радуги -->
     <ellipse cx="100" cy="80"  rx="105" ry="60" fill="none"
          stroke="red" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="101" ry="56" fill="none"
          stroke="orange" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="97" ry="52" fill="none"
          stroke="yellow" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="93" ry="48" fill="none"
          stroke="green" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="89" ry="44" fill="none"
          stroke="deepskyblue" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="85" ry="40" fill="none"
          stroke="blue" stroke-width="4"/>
     <ellipse cx="100" cy="80"  rx="81" ry="36" fill="none"
          stroke="purple" stroke-width="4"/>
     <!--Солнце -->
     <circle cx="12" cy="12"  r="10" fill="orangered"/>
     <!--Лучи солнца -->
     <line x1="12" y1="12" x2="12" y2="40"
          stroke="orangered" stroke-width="2"  />
     <line x1="12" y1="12" x2="40" y2="12"
          stroke="orangered" stroke-width="2"  />
     <line x1="12" y1="12" x2="30" y2="30"
          stroke="orangered" stroke-width="2"  />
     <!--Земля-->
     <rect x="0" y="70" width="200" height="30"  fill="lightgreen"/>
</svg>
Листинг 2.7.3. Пример sequence3.svg
polygone
Описание
Простой пейзаж. Здесь уже становится сложно следить за блоками кода, отражающими разные объекты.