transform
=========

« Справочник SVG атрибутов

В атрибуте `transform` перечисляются описания преобразований, применяемых как к самому элементу, так и к его последователям. Описания в списке разделяются пробелами или запятыми и применяются в порядке слева направо.

Контекст использования
----------------------

| Категории | Нет |
| --- | --- |
| Значение | **<transform-list>** |
| Анимация | Да |
| Нормативная база | SVG 1.1 (2nd Edition) |

### Типы преобразований

matrix(<a> <b> <c> <d> <e> <f>)

Преобразование с использованием матрицы из шести элементов. Преобразование `matrix(a,b,c,d,e,f)` равнозначно применению матрицы



(

a

c

e

b

d

f

0

0

1

)

\begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix}
,


которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы:


(

x
пред.



y
пред.


1

)

=

(

a

c

e

b

d

f

0

0

1

)

(

x

нов.


y
нов.


1

)

=

(

a

x
нов.

+
c

y
нов.

+
e

b

x
нов.

+
d

y
нов.

+
f

1

)

 \begin{pmatrix} x\*{\mathrm{пред.}} \ y\*{\mathrm{пред.}} \ 1 \end{pmatrix} = \begin{pmatrix} a & c & e \ b & d & f \ 0 & 0 & 1 \end{pmatrix} \begin{pmatrix} x\*{\mathrm{нов.}} \ y\*{\mathrm{нов.}} \ 1 \end{pmatrix} = \begin{pmatrix} a x\*{\mathrm{нов.}} + c y\*{\mathrm{нов.}} + e \ b x\*{\mathrm{нов.}} + d y\*{\mathrm{нов.}} + f \ 1 \end{pmatrix}



translate(<x> [<y>])

Перенос по осям `x` и `y`. Равнозначно `matrix(1 0 0 1 x y)`. Если значение `y` опущено, оно принимается равным нулю.

scale(<x> [<y>])

Масштабирование по осям `x` и `y`. Равнозначно `matrix(x 0 0 y 0 0)`. Если значение `y` опущено, оно принимается равным `x`.

rotate(<a> [<x> <y>])

Поворот на `a` градусов вокруг указанной точки. Если необязательные параметры `x` и `y` опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице



(

cos
a

-
sin
a

0

sin
a

cos
a

0

0

0

1

)

\begin{pmatrix} \cos a & -\sin a & 0 \ \sin a & \cos a & 0 \ 0 & 0 & 1 \end{pmatrix}


Если необязательные параметры `x` и `y` присутствуют, поворот будет осуществляться вокруг точки `(x, y)`. Операция равнозначна следующему списку преобразований: `translate(<x>, <y>) rotate(<a>) translate(-<x>, -<y>)`.

skewX(<a>)

Наклон относительно оси `x` на `a` градусов. Операция соответствует матрице



(

1

tg
a

0

0

1

0

0

0

1

)

\begin{pmatrix} 1 & \tan(a) & 0 \ 0 & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}



skewY(<a>)

Наклон относительно оси `y` на `a` градусов. Операция соответствует матрице



(

1

0

0

tg
a

1

0

0

0

1

)

 \begin{pmatrix} 1 & 0 & 0 \ \tan(a) & 1 & 0 \ 0 & 0 & 1 \end{pmatrix}



Примеры
-------

### Поворот и перенос SVG-элемента

В этом простом примере мы поворачиваем и переносим SVG-элемент, используя атрибут `transform`. Первоначальный элемент до преобразования показан полупрозрачным.

CSS (необязательный):


```css
text {
  font: 1em sans-serif;
}
```


SVG:


```html
<svg
 width="180"
 height="200"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Это элемент до применения переноса и поворота -->
  <rect
 x="50"
 y="50"
 height="100"
 width="100"
 style="stroke:#000; fill: #0086B2"
 fill-opacity="0.2"
 stroke-opacity="0.2"></rect>

  <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента -->
  <rect
 x="50"
 y="50"
 height="100"
 width="100"
 style="stroke:#000; fill: #0086B2"
 transform="translate(30) rotate(45 50 50)"></rect>
  <text x="60" y="105" transform="translate(30) rotate(45 50 50)">
    Hello Moz!
  </text>
</svg>
```


| Screenshot | Live sample |
| --- | --- |
|  |  |

### Общее преобразование

Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования `matrix(1,2,3,4,5,6)` и нарисуем жирную синюю линию из точки (10,20) в точку (30,40) в новой системе координат. Тонкая белая линия, проходящая через те же точки, нарисована над нею, используя первоначальную систему координат.


```html
<svg width="160" height="230" xmlns="http://www.w3.org/2000/svg">
  <g transform="matrix(1,2,3,4,5,6)">
    <!-- Новая система координат (жирная синяя линия)
 x1 = 10 | x2 = 30
 y1 = 20 | y2 = 40
 -->
    <line
 x1="10"
 y1="20"
 x2="30"
 y2="40"
 style="stroke-width: 10px; stroke: blue;" />
  </g>

  <!-- Предыдущая система координат (тонкая белая линия)
 x1 = 1 \* 10 + 3 \* 20 + 5 = 75 | x2 = 1 \* 30 + 3 \* 40 + 5 = 155
 y1 = 2 \* 10 + 4 \* 20 + 6 = 106 | y2 = 2 \* 30 + 4 \* 40 + 6 = 226
 -->
  <line
 x1="75"
 y1="106"
 x2="155"
 y2="226"
 style="stroke-width: 1px; stroke: white;" />
</svg>
```

Элементы
--------

Следующие элементы могут использовать атрибут `transform`:

* `<a>`
* `<clipPath>` (en-US)
* `<defs>`
* `<foreignObject>`
* `<g>`
* `<switch>` (en-US)
* `<use>`
* Графические элементы »