Что такое атрибут 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. Используйте его, чтобы создавать динамичные и интерактивные изображения, которые будут привлекать внимание и восхищать зрителей.
