Атрибут TRANSFORM

Атрибут transformопределяет список преобразования, которые применяются к элементу. Элементы в списке преобразования разделяются пробелами и / или запятыми, и применяются справа налево.

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

  • matrix() - Преобразование с использованием матрицы из шести элементов.
  • translate() - Перенос по осям x и y.
  • rotate() - Поворот на a градусов вокруг указанной точки
  • scale() - Масштабирование по осям x и y
  • skewX(),skewY() - Наклон относительно оси на a градусов

Matrix

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

a  c  e
b  d  f
0  0  1

Translate

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

Scale

Rotate

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

cos(a)   -sin(a)  0
sin(a)    cos(a)  0
  0         0     1

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

translate(x, y) rotate(a) translate(-x, -y)

SkewX

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

1  tan(a)  0
0    1     0
0    0     1

SkewY

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

  1    0     0
tan(a) 1     0
  0    0     1

Примеры

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

<rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/>
    <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(130) rotate(45 50 50)"/>

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

<rect x="20" y="20" width="50" height="50" style="fill: #cc3333"/>
    <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="matrix(1,0,0,1,100,20)"/>
  

  1. SVG
  2. HTML