transform

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..

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

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

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

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

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

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

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

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

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

(\begin{matrix} x_{пред.} \\ y_{пред.} \\ 1 \end{matrix}) = (\begin{matrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{matrix}) (\begin{matrix} x_{нов.} \\ y_{нов.} \\ 1 \end{matrix}) = (\begin{matrix} a x_{нов.} + c y_{нов.} + e \\ b x_{нов.} + d y_{нов.} + f \\ 1 \end{matrix}) \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 опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице

(\begin{matrix} cos a & - sin a & 0 \\ sin a & cos a & 0 \\ 0 & 0 & 1 \end{matrix}) \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 градусов. Операция соответствует матрице

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

skewY(<a>)

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

(\begin{matrix} 1 & 0 & 0 \\ tg a & 1 & 0 \\ 0 & 0 & 1 \end{matrix}) \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"       fill-opacity="0.2"    stroke-opacity="0.2"></rect>  <!-- Здесь мы добавим текстовый элемент, повернём и перенесём оба элемента -->  <rect    x="50"    y="50"    height="100"    width="100"       transform="translate(30) rotate(45 50 50)"></rect>  <text x="60" y="105" transform="translate(30) rotate(45 50 50)">    Hello Moz!  </text></svg>

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

Вот простой пример, чтобы понять общее преобразование. Мы рассмотрим матрицу преобразования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"      />  </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"    /></svg>