Основные типы данных 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%. Это означает, что рисунок будет масштабироваться для браузера любого размера, заполняя весь экран. |
