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

Использование функции поворота в масштабируемой векторной графике

• Делиться
• флипборд
• Эл. адрес

МФТО / Getty Images

Постоянный писатель и писатель-призрак, освещающий ряд тем, включая маркетинг, здравоохранение и технологии.

вращать Функция в SVG (Scalable Vector Graphics) позволяет вам указать угол, на который вы хотите повернуть данное изображение. Он работает, чтобы повернуть изображение в любом направлении.​

Консорциум World Wide Web (W3C) определяет SVG как «язык, основанный на XML для описания двумерной векторной и смешанной векторной/растровой графики. с содержимым HTML или встроенных с использованием пространств имен XML в другие языки XML. SVG также поддерживает динамические изменения; сценарий можно использовать для создания интерактивных документов, а анимацию можно выполнять с помощью функций декларативной анимации или с помощью сценария».

О повороте

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

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

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

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

Использовать вращать, укажите угол поворота и координаты фиксированной области:

В этом коде угол поворота равен 45 градусам. Затем следует центральная точка; в этом примере его координаты равны 100 по оси x и 100 по оси y. Если вы не введете координаты положения центра, по умолчанию они будут равны 0,0. В приведенном ниже примере угол по-прежнему равен 45 градусам, но центральная точка не установлена; поэтому по умолчанию он будет равен 0,0.

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

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

Этим способом, вращать дает вам полный контроль над углами ваших изображений.