Базовые трансформации
=====================

* « Предыдущая статья
* Следующая статья »

Теперь мы готовы начать изменять наши замечательные изображения. Но сначала давайте ознакомимся с `<g>` элементом. С его помощью вы можете назначить свойства для любого набора элементов. На самом деле, в этом и состоит его единственная цель.

#### Пример


```html
<svg width="30" height="10">
  <g fill="red">
    <rect x="0" y="0" width="10" height="10" />
    <rect x="20" y="0" width="10" height="10" />
  </g>
</svg>
```


Все последующие преобразования суммируются в атрибуте преобразования элемента `transform` . Преобразования могут быть последовательно суммированы, разделителем выступает пробел.

Перемещения
-----------

Иногда необходимо сместить элемент, хотя вы спозиционировали его согласно определённым атрибутам. Для этого используется `translate()`.


```html
<svg width="40" height="50" style="background-color:#bff;">
  <rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
</svg>
```


Пример генерирует прямоугольник, перемещённый в точку (30,40) вместо точки (0,0).

если второе значение не задано, то оно приравнивается *0*.

Вращение
--------

Вращение элементов - это достаточно типичная задача. Используйте `rotate()` для этого:


```html
<svg width="31" height="31">
  <rect x="12" y="-10" width="20" height="20" transform="rotate(45)" />
</svg>
```


Данный пример показывает квадрат который повернули на 45 градусов. Значение для `rotate()` задаётся в градусах.

Смещение углов
--------------

Чтобы сделать ромб из нашего прямоугольника, доступны преобразования skewX () и skewY (). Каждый из них принимает угол, определяющий, насколько элемент будет искажён.

Масштабирование
---------------

`scale()` изменяем размер элемента. Он использует 2 параметра. Первый - это коэффициент масштабирования по оси Х, а второй - по оси Y. Коэффициенты выражают сжатие по отношению к оригинальному изображению. Например, *0.5 уменьшает на 50%. Если второй параметр отсутствует, то тогда он принимается равным первому.*

Комплексные перемещения с `matrix()`
------------------------------------

Все приведённые выше преобразования могут быть описаны с помощью матрицы перемещений 2x3. Чтобы объединить несколько перемещений, можно установить результирующую матрицу с помощью `matrix(a, b, c, d, e, f)`, которая преобразует координаты из предыдущей системы координат в новую систему координат посредством:



{

x

new

C
o
o
r
d
S
y
s

=
a

x

prev
C
o
o
r
d
S
y
s

+
c

y

prev

C
o
o
r
d
S
y
s

+
e


y

new

C
o
o
r
d
S
y
s

=
b

x

prev

C
o
o
r
d
S
y
s

+
d

y

prev
C
o
o
r
d
S
y
s

+
f

\left{ \begin{matrix} x\*{\mathrm{prevCoordSys}} = a x\*{\mathrm{newCoordSys}} + c y\*{\mathrm{newCoordSys}} + e \ y\*{\mathrm{prevCoordSys}} = b x\*{\mathrm{newCoordSys}} + d y\*{\mathrm{newCoordSys}} + f \end{matrix} \right.


См. конкретный пример документации SVG. Подробную информацию об этом свойстве можно найти в SVG Рекомендациях.

Эффекты на системе координат
----------------------------

В случае использования преобразований вы устанавливаете новую систему координат внутри элемента, к которому применяются изменения. Это означает, что единицы измерения которые вы определяете и его дочерние еи не будут соответствовать 1:1, но также будут искажены, повёрнуты, перемещены и смаштабированы в соответствии с преобразованиями.


```html
<svg width="100" height="100">
  <g transform="scale(2)">
    <rect width="50" height="50" />
  </g>
</svg>
```


В результата прямоугольник в примере выше будет 100x100px. Более интригующие эффекты возникают, когда вы используете такие атрибуты, как `userSpaceOnUse`.

Встраивание SVG в SVG
---------------------

В отличие от HTML, SVG позволяет встраивать другие `svg` элементы без разрыва. Таким образом вы можете запросто создать новую координатную систему используя `viewBox`, `width` и `height` внутреннего `svg` элемента.


```html
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">
  <svg width="100" height="100" viewBox="0 0 50 50">
    <rect width="50" height="50" />
  </svg>
</svg>
```


На примере выше, так же как и на других примерах ранее, вы можете видеть такой же эффект увеличения изображения в два раза.

* « Предыдущая статья
* Следующая статья »