НОУ ИНТУИТ | Масштабируемая векторная графика. Лекция 2: Основные фигуры SVG

Учитесь и получайте официальные документы БЕСПЛАТНО. Вы можете поддержать наш проект.

Регистрация Вход

Твой путь к знаниям!

Опубликован: 07.11.2007 | Уровень: специалист | Доступ: платный

|

Вам нравится? Нравится 29 студентам

| Поделиться |

Поддержать программу

Основные типы данных SVG – графики

В SVG – графике имеется большое количество свойств (атрибутов). Каждое значение свойства имеет определенную размерность, которую можно отнести к заданному типу данных. В табл. 2.8 приводятся основные типы данных и их описание.

Таблица 2.8. Типы данных SVG – графики.
Тип данных	Описание
<integer>	Содержит одну или несколько цифр от "0" до "9"
<number>	Включает в себя описание типа <integer>, но может содержать дробную часть числа.
<length>	Может быть представлено типом <number>. Поддерживается также два типа величин CSS: Относительные единицы длины: em – высота используемого шрифта. ex – высота буквы "x" px – пикселы % – проценты Абсолютные единицы длины: in – дюймы (1 дюйм = 2,54 см) cm – сантиметры mm – миллиметры pt – пункты (1 пункт = 1/72 дюйма) pc – пики (1 пик = 12 пунктов) По умолчанию приняты пикселы.
<coordinate>	Представляет координату (абсциссу или ординату)– расстояние от начала координат до заданной точки.
<angle>	Угол, измеряемый в следующих единицах : deg ( degree ) градусах, grad ( grades ) - градах, rad ( radians ) радианах. По умолчанию приняты градусы (также, как определено в CSS2).
<color>	Цвет, который можно задавать в виде имени или кода RGB как в спецификации HTML: #rrggbb.
<paint>	Рисование, возможные значения: fill – заливка формы или stroke - рисование контура.
<transform-list>	Список преобразований (например: scale(2) translate(100,100) ).
<uri>	Уникальный идентификатор ресурса (Uniform Resource Identifiers) – адрес ресурса в Интернете.
<time>	Время, измеряемой в миллисекундах: ms (milliseconds ) или в секундах: s ( seconds ). Может принимать только положительные значения.

Содержимое этой таблицы будем применять на протяжении всего этого курса.

Свойство ViewBox

Рассмотрим масштабирование SVG – документов. Представим себе, что у нас есть следующий фрагмент кода:

<svg width="200" height="100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

(Пример rect6.svg)

Для прямоугольника его координаты, ширина и высота задаются с учетом размеров самого документа – 200 на 100 пикселей. При увеличении размеров документа, например в два раза, размеры прямоугольника останутся прежними:

<svg width="400" height="200">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

Понятно, что для пропорционального изменения следует увеличить все значения свойств элемента rect:

<svg width="400" height="200">
     <rect x="100" y="80" width="200" height="60"  fill="skyblue"
          stroke="red" stroke-width="4"/>
</svg>

Теперь мы действительно видим увеличенный рисунок (рис. 2.11):

Рис. 2.11. Увеличение в два раза SVG – документа

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

<svg width="200" height="100" viewBox="0 0 200 100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

В значении атрибута viewBox указываются через пробелы четыре параметра – координата по x, координата по y, ширина и высота видимой области. Пока ничего не изменилось – графически рисунок выглядит точно так же, как и в примере rect6.svg. Увеличим в два раза ширину и высоту документа, оставляя неизменными все прочие атрибуты:

<svg width="400" height="200" viewBox="0 0 200 100">
     <rect x="50" y="40" width="100" height="30"  fill="skyblue"
          stroke="red" stroke-width="2"/>
</svg>

(Пример viewBox1.svg)

Теперь весь рисунок масштабируется без изменения свойств прямоугольника (см. рис. 2.11)! Дело в том, что теперь координаты всех элементов в документе определяются относительно параметров, указанных в атрибуте viewBox.

В табл. 2.9 приводится использование атрибута viewBox для масштабирования рисунка, состоящего из нескольких элементов.

Таблица 2.9. Свойство ViewBox.
№	Код	Вид в браузере
2.9.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="400" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 200 100"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox1svg </desc> <rect x="50" y="40" width="100" height="30" fill="skyblue" stroke="red" stroke-width="2"/> </svg> Листинг 2.9.1. Пример viewBox1svg
	Описание
	Полный листинг примера. Параметры атрибута viewBox соответствуют размерам исходного документа.
№	Код	Вид в браузере
2.9.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" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox2.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg> Листинг 2.9.2. Пример viewBox2.svg
	Описание
	Атрибут viewBox="0 0 1000 800". Относительно этих параметров созданы все элементы – обратите внимание, размеры документа составляют всего 200 х 100 пикселей!
№	Код	Вид в браузере
2.9.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="5cm" height="5cm" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox3.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg> Листинг 2.9.3. Пример viewBox3.svg
	Описание
	Для документа установлен размер 5 х 5 сантиметров. Рисунок масштабируется.
№	Код	Вид в браузере
2.9.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="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 800"> <title>SVG графика. Лекция 2. Основные фигуры SVG – графики. </title> <desc> Пример viewBox4.svg </desc> <circle cx="500" cy="400" r="300" fill="lightskyblue" stroke="blue" stroke-width="30"/> <ellipse cx="500" cy="500" rx="150" ry="100" fill="none" stroke="blue" stroke-width="30"/> <rect x="300" y="370" width="400" height="130" fill="lightskyblue"/> <ellipse cx="350" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <ellipse cx="650" cy="300" rx="100" ry="50" fill="white" stroke="blue" stroke-width="30"/> <circle cx="350" cy="300" r="25" fill="black" /> <circle cx="650" cy="300" r="25" fill="black" /> </svg> Листинг 2.9.4. Пример viewBox4.svg
	Описание
	Для документа установлены размеры 100% х 100%. Это означает, что рисунок будет масштабироваться для браузера любого размера, заполняя весь экран.