SVG: Атрибут transform | Web Мастерская

Scalable Vector Graphics (SVG) — это мощный инструмент для создания векторной графики, которая способна масштабироваться без потери качества. Одним из ключевых аспектов работы с SVG является возможность трансформировать элементы, что позволяет создавать динамичные и интерактивные изображения. В этой статье мы рассмотрим атрибут transform и его возможности.

Что такое атрибут transform?

Атрибут transform позволяет изменять положение, ориентацию и размер элементов SVG. Он поддерживает шесть основных типов трансформаций:

translate: перемещение элемента по осям X и Y.
scale: масштабирование элемента по осям X и Y.
rotate: поворот элемента вокруг центральной точки.
skewX: наклон элемента по оси X.
skewY: наклон элемента по оси Y.
matrix: произвольная матричная трансформация.

Примеры использования атрибута transform

Translate
Трансформация translate позволяет переместить элемент на указанное количество единиц по осям X и Y:

<rect x="10" y="10" width="100" height="100" transform="translate(50, 50)" />

Scale
Трансформация scale позволяет увеличить или уменьшить размер элемента по осям X и Y:

<rect x="10" y="10" width="100" height="100" transform="scale(2)" />

Rotate
Трансформация rotate поворачивает элемент на указанный угол вокруг центральной точки:

<rect x="10" y="10" width="100" height="100" transform="rotate(45)" />

SkewX и SkewY
Трансформации skewX и skewY позволяют наклонить элемент по соответствующим осям:

<rect x="10" y="10" width="100" height="100" transform="skewX(30)" />

Matrix
Матричная трансформация позволяет задать произвольную аффинную трансформацию:

<rect x="10" y="10" width="100" height="100" transform="matrix(1, 0, 0, 1, 50, 50)" />

Атрибут transform — это мощный инструмент, который позволяет изменять положение, ориентацию и размер элементов SVG. Используйте его, чтобы создавать динамичные и интерактивные изображения, которые будут привлекать внимание и восхищать зрителей.