--- title: transform slug: Web/SVG/Attribute/transform tags: - SVG - SVG атрибуты translation_of: Web/SVG/Attribute/transform ---

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

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

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

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

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

matrix(<a> <b> <c> <d> <e> <f>)
Преобразование с использованием матрицы из шести элементов. Преобразование matrix(a,b,c,d,e,f) равнозначно применению матрицы (acebdf001)\begin{pmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{pmatrix}, которая отображает координаты из новой системы координат в предыдущую систему координат используя следующие формулы: (xпред.yпред.1)=(acebdf001)(xнов.yнов.1)=(axнов.+cyнов.+ebxнов.+dyнов.+f1) \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 опущены, поворот будет осуществляться вокруг начала координат текущей пользовательской системы координат. Операция соответствует матрице (cosa-sina0sinacosa0001)\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 градусов. Операция соответствует матрице (1tga0010001)\begin{pmatrix} 1 & \tan(a) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}
skewY(<a>)
Наклон относительно оси y на a градусов. Операция соответствует матрице (100tga10001) \begin{pmatrix} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{pmatrix}

Примеры

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

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

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

text {
  font: 1em sans-serif;
}

SVG:

<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>

{{EmbedLiveSample("Rotating_and_Translating_an_SVG_element",200,200,"/files/5217/rotate_and_translate_svg.png.png")}}

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

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

<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>

{{ EmbedLiveSample('General_Transformation','200px','250px') }}

Элементы

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