Научете как да завъртите в SVG

Функция за завъртане на мащабируема векторна графика

Завъртането на изображение ще промени ъгъла, на който се показва изображението. За прости графики, това може да добави разнообразие и интерес към това, което иначе може да бъде просто или скучно изображение. Както при всички трансформации, завъртането работи като част от анимация или за статична графика. Научете как да използвате въртенето в SVG или мащабируемата Vector Graphics ви позволява да поискате отделен ъгъл за дизайна на вашата форма. Функцията за въртене на SVG работи, за да превърне изображението в двете посоки.

За Завъртане

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

Само с този ефект сте преминали от много типична кутия (която е супер обичайна на сайтове) до диамант, който изобщо не е чест и който не е добавил интересен визуален сорт към дизайна. Завъртането също е част от анимационните възможности в SVG. Кръгът може постоянно да се обръща, докато се показва. Това движение може да привлече вниманието на посетителите и да ви помогне да фокусирате опита си върху ключови области или елементи в дизайна.

Завъртане работи върху теорията, че една точка на изображението ще остане фиксирана. Представете си парче хартия, прикрепена към картон с натискащ щифт. Местоположението на щифта е фиксирано място. Ако завъртите хартията, като вземете ръба и го въртите по посока на часовниковата стрелка или в посока, обратна на часовниковата стрелка, плъзгащият палец никога не се движи, но правоъгълникът все още променя ъглите. Хартията ще се върти, но фиксираната точка на щифта остава непроменена. Това е много подобно на начина, по който функционира функцията за завъртане.

Завъртете синтаксиса

При завъртане се изписва ъгълът на завоя и координатите на фиксираната област.

трансформиране = "завъртане (45100100)"

Ъгълът на въртене е първото нещо, което добавяте. В този код ъгълът на въртене е 45 градуса. Централната точка е това, което бихте добавили по-нататък. Тук тази централна точка се намира на координати 100, 100. Ако не влезете в координатите на централната позиция, те по подразбиране ще бъдат 0,0. В примера по-долу, ъгълът все още ще бъде 45 градуса, но тъй като централната точка не е установена, то по подразбиране ще бъде 0,0.

трансформиране = "завъртане (45)"

По подразбиране ъгълът се насочва към дясната страна на графиката. За да завъртите формата в обратна посока, използвайте знак минус, за да посочите отрицателна стойност.

трансформиране = "завъртане (-45)"

45 градуса е въртене на четвърт ход, тъй като ъглите се основават на 360-градусов кръг. Ако посочите революцията като 360, изображението няма да се промени, защото буквално я преобръщате в пълен кръг, така че крайният резултат ще бъде идентичен на външния вид, откъдето сте започнали.