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

Флексибилна векторска графика Ротирај функција

Ротирањето на сликата ќе го промени аголот на кој се прикажува сликата. За едноставни графики, ова може да додаде некои разновидност и интерес за она што инаку може да биде директна или здодевна слика. Како и кај сите трансформации, ротирајте дела како дел од анимација или за статична графика. Учење како да се користи ротирање во SVG или Scalable Vector Graphics , ви овозможува да побарате посебен агол кон дизајнот на вашата форма. Функцијата за ротирање на SVG работи за да ја претвори сликата во двете насоки.

За ротирање

Функцијата за ротирање е за аголот на графиката. Кога дизајнирате SVG слика , ќе создадете статичен модел кој најверојатно ќе седне на традиционален агол. На пример, квадрат ќе има две страни долж X-оската и две долж Y-оската. Со ротирање, можете да го земете истиот плоштад и да го претворите во форма на дијамант.

Со само еден ефект, отидовте од многу типична кутија (што е супер вообичаено на веб-страниците) до дијамант, кој воопшто не е вообичаен и кој не додаде некоја интересна визуелна сорта на дизајнот. Ротирањето е исто така дел од капацитетите за анимација во SVG. Кругот може постојано да се сврти додека се прикажува. Ова движење може да привлече внимание на посетителите и да ви помогне да го фокусирате своето искуство на клучните области или елементи во дизајнот.

Ротирање работи на теоријата дека една точка на сликата ќе остане фиксна. Замислете парче хартија прицврстена за картон со копче. Местоположбата на пиновите е фиксирано место. Ако ја завртите хартијата со вртење на работ и ротирање во движење на стрелките на часовникот или спротивно од стрелките на часовникот, копчето никогаш не се поместува, но правоаголникот сè уште ги менува аглите. Хартијата ќе се вртат, но фиксната точка на иглата останува непроменета. Ова е многу слично како функционира функцијата на ротирање.

Ротирај синтакса

Со ротирање, наведете го аголот на вртење и координатите на фиксната област.

трансформирај = "ротирај (45.100.100)"

Аголот на ротацијата е првото нешто што го додавате. Во овој код, аголот на ротација е 45 степени. Централната точка е она што ќе го додадете следно. Еве, таа точка на центарот се наоѓа на координатите 100, 100. Ако не внесувате координатни координати во централната позиција, тие ќе се постават на 0,0. Во примерот подолу, аголот сеуште би бил 45 степени, но бидејќи централната точка не е утврдена, таа ќе се постави на 0,0.

трансформирај = "ротирај (45)"

Стандардно, аголот оди кон десната страна на графикот. За да ја ротирате формата во спротивна насока, употребувате знак минус за да наведете негативна вредност.

трансформирај = "ротирај (-45)"

Ротација од 45 степени е четвртина, бидејќи аглите се засноваат на круг од 360 степени. Ако ја наброите револуцијата како 360, сликата нема да се промени, бидејќи буквално ќе го флипувате во полн круг, така што крајниот резултат ќе биде идентичен по појава на местото каде што сте почнале.