Масштабируемая векторная графика
[+]
Опубликован: 07.11.2007 | Доступ: свободный | Студентов: 1747 / 327 | Оценка: 4.29 / 4.14 | Длительность: 25:09:00
Тема: Компьютерная графика
Специальности: Программист
Теги: arc, baseline, css, flash, glyph, html, marker, stroke, SVG, sweep, x-axis, анимация, браузеры, графика, паттерн, паттерны, поддержка, радиальный градиент, форматы, цвета, шрифты, элементы
Лекция 2:

Основные фигуры SVG – графики
A
|
версия для печати
< Лекция 1 || Лекция 2: 1234567 || Лекция 3 >

Линия. (line)

Один из самых простых элементов SVG – графики – линия, отрезок прямой, заключенной между двумя точками. Для ее создания задаются координаты начальной и конечной точек (рис. 2.4):

Элемент line

Рис. 2.4. Элемент line

По умолчанию, без задания атрибута stroke и stroke-width рисуется волосяная линия толщиной 0,1 пикселя. В табл. 2.4 приводятся различные примеры элемента line.

Таблица 2.4. Элемент линия (line).
№ Код Вид в браузере
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="200" height="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример line1.svg
     </desc>
     <line x1="20" y1="10" x2="190" y2="90"  />
</svg>
2.4.1.
line
Описание
Линия с минимумом атрибутов. По умолчанию черного цвета толщиной 0,1 пикс.
№ Код Вид в браузере
2.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="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример line2.svg
     </desc>
     <line x1="20" y1="10" x2="190" y2="90"
          stroke="black" stroke-width="0.1"  />
</svg>
Листинг 2.4.2. Пример line2.svg
line
Описание
Линия с заданием цвета и толщины. Приведенные значения совпадают с принятыми по умолчанию.
№ Код Вид в браузере
2.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="100"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример line3.svg
     </desc>
     <line x1="20" y1="10" x2="190" y2="90"
          stroke="tomato" stroke-width="10"  />
</svg>
Листинг 2.4.3. Пример line3.svg
line
Описание
Линия с заданием цвета и толщины.

Ломаная (polyline)

Для рисования фигуры, состоящей из нескольких соединенных отрезков, можно воспользоваться элементом line, задавая для каждого отрезка координаты пары точек – начальной и конечной. Однако, более удобным в данном случае, является применение элемента polyline, где конечная точка предыдущего отрезка служит начальной для последующего (рис. 2.5)

Элемент polyline

Рис. 2.5. Элемент polyline

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

<polyline points="20 10 180 10 20 90 180 90" />

По умолчанию, фигура заполняется заливкой. В табл. 2.5 приводятся различные примеры элемента polyline.

Таблица 2.5. Форма ломаная (polyline).
№ Код Вид в браузере
2.5.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>
          Пример polyline1.svg
     </desc>
     <polyline  points="20,10 180,10 20, 90 180,90"  />
</svg>
Листинг 2.5.1. Пример polyline1.svg
polyline
Описание
Ломаная с минимумом атрибутов. Пространство, лежащее внутри отрезков заполняется черным цветом.
№ Код Вид в браузере
2.5.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>
          Пример polyline2.svg
     </desc>
     <polyline  points="20,10 180,10 20, 90 180,90"
          stroke="red" stroke-width="3"  />
</svg>
Листинг 2.5.2. Пример polyline2.svg
polyline
Описание
Ломаная с заданием цвета и толщины контура.
№ Код Вид в браузере
2.5.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>
          Пример polyline3.svg
     </desc>
     <polyline  points="20,10 180,10 20, 90 180,90"
          stroke="red" stroke-width="3" fill="lightpink" />
</svg>
Листинг 2.5.3. Пример polyline3.svg
polyline
Описание
Фигура с контуром и заливкой
№ Код Вид в браузере
2.5.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>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title>
     <desc>
          Пример polyline4.svg
     </desc>
     <polyline  points="20,10 180,10 20, 90 180,90"
          stroke="red" stroke-width="3" fill="none" />
</svg>
Листинг 2.5.4. Пример polyline4.svg
polyline
Описание
Фигура с минимальным набором атрибутов для рисования именно ломаной линии.
Дальше >>
< Лекция 1 || Лекция 2: 1234567 || Лекция 3 >

Вопросы и ответы

вопросов: 0