Узнайте, как вращать графику в SVG

Масштабируемая функция поворота векторной графики

Поворот изображения изменит угол, под которым отображается это изображение. Для простой графики это может добавить некоторое разнообразие и интерес к тому, что в противном случае может быть простым или скучным изображением. Как и во всех преобразованиях, вращение работает как часть анимации или статической графики. Изучение того, как использовать вращение в SVG или Scalable Vector Graphics, позволяет вам запрашивать четкий угол дизайна вашей фигуры. Функция поворота SVG работает для поворота изображения в любом направлении.

О повороте

Функция поворота – все о углу графика. Когда вы создаете SVG-изображение, вы собираетесь создать статическую модель, которая, вероятно, будет сидеть под традиционным углом. Например, квадрат будет иметь две стороны вдоль оси X и две вдоль оси Y. С помощью поворота вы можете взять этот же квадрат и превратить его в алмаз.

Благодаря этому единственному эффекту вы перешли от очень типичного бокса (который очень распространен на веб-сайтах) к бриллианту, который вообще не распространен и который не добавил интересного визуального разнообразия в дизайн. Поворот также является частью возможностей анимации в SVG. Круг может постоянно поворачиваться во время отображения. Это движение может привлечь внимание посетителей и помочь вам сосредоточить их внимание на ключевых областях или элементах дизайна.

Rotate работает над теорией, что одна точка на изображении останется фиксированной. Представьте себе лист бумаги, прикрепленный к картону с помощью канцелярской кнопки. Расположение булавки – это фиксированное место. Если вы поворачиваете бумагу, хватая за край и поворачивая ее по часовой стрелке или против часовой стрелки, канцелярская кнопка никогда не перемещается, но прямоугольник по-прежнему меняет углы. Бумага будет вращаться, но фиксированная точка булавки остается неизменной. Это очень похоже на то, как работает функция поворота.

Повернуть синтаксис

С помощью поворота вы перечисляете угол поворота и координаты фиксированной области.

 transform = "rotate (45,100,100)" 

Угол поворота – это первое, что вы добавляете. В этом коде угол поворота составляет 45 градусов. Центральная точка – это то, что вы добавили бы дальше. Здесь эта центральная точка находится в координатах 100, 100. Если вы не введете координаты положения центра, по умолчанию они будут равны 0,0. В приведенном ниже примере угол все равно будет 45 градусов, но, поскольку центральная точка не установлена, по умолчанию будет 0,0.

 transform = "rotate (45)" 

По умолчанию угол идет к правой стороне графика. Чтобы повернуть фигуру в противоположном направлении, вы используете знак минус, чтобы перечислить отрицательное значение.

 transform = "rotate (-45)" 

Поворот на 45 градусов – это четверть оборота, поскольку углы основаны на круге на 360 градусов. Если вы перечислите оборот как 360, изображение не изменится, потому что вы буквально переворачиваете его по кругу, поэтому конечный результат будет по внешнему виду идентичен тому, с которого вы начали.

Оцените статью
Solutics.ru
Добавить комментарий