Sužinokite, kaip pasukti SVG

Scalable vektorinės grafikos posūkio funkcija

Sukdami vaizdą, bus pakeistas kampas, kuriame rodomas šis vaizdas. Dėl paprastos grafikos tai gali suteikti tam tikrą įvairovę ir susidomėjimą tuo, kas gali būti paprastas ar nuobodus vaizdas. Kaip ir visi pakeitimai, rotacijos darbai yra animacijos ar statinio grafiko dalis. Sužinokite, kaip naudoti pasukti SVG arba "Scalable Vector Graphics" , galite prašyti, kad jūsų formos dizainas būtų aiškus kampas. SVG sukimosi funkcija veikia norint paversti vaizdą bet kuria kryptimi.

Apie rotaciją

Funkcija pasukti yra apie grafiko kampą. Sukūrę SVG vaizdą , ketinate sukurti statinį modelį, kuris greičiausiai sėdi tradiciniu kampu. Pavyzdžiui, kvadratas turi dvi puses išilgai ašies X ir dvi išilgai Y ašies. Sukdami sukite, tu gali paimti tą patį kvadratą ir paversti jį deimantų formavimu.

Vien tik tokiu efektu jūs nuėjote iš labai tipiško langelio (kuris yra labai paplitęs tinklalapiuose) į deimantą, kuris nėra įprastas ir kuris neįtraukė į dizainą įdomios vizualinės įvairovės. Sukti taip pat yra SVG animacinių galimybių dalis. Apskritimas gali nuolat pasukti, kol rodomas. Šis pasiūlymas gali atkreipti lankytojų dėmesį ir padėti jums sutelkti savo patirtį į pagrindinę sritį ar dizaino elementus.

Pasukti teorijos darbus, kad vienas taškas ant nuotraukos išliks fiksuotas. Įsivaizduokite popieriaus lapą, pritvirtintą prie kartono, su spyruokliu. Kabelio vieta yra fiksuota vieta. Jei pasukite popierių patraukdami kraštą ir sukdami jį sukdami pagal laikrodžio rodyklę arba prieš laikrodžio rodyklę, stumiamoji spyna niekada nesikeičia, bet stačiakampis vis tiek pasikeičia kampai. Popierius sukasi, o fiksuotas taško liežuvėlis nesikeičia. Tai labai panašus į funkcijos sukimosi funkciją.

Pasukti sintaksę

Pasukdami rodyklę, nurodote posūkio kampą ir fiksuoto ploto koordinates.

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

Sukimosi kampas yra pirmas dalykas, kurį pridedate. Šiame kodekse rotacijos kampas yra 45 laipsnių. Vidurio taškas yra tai, ką pridėtumėte toliau. Čia šis taškas sėdi ties koordinatėmis 100, 100. Jei neįvesite centrinės padėties koordinatės, jie bus numatyti 0,0. Toliau pateiktame pavyzdyje kampas vis tiek būtų 45 laipsnių, tačiau kadangi centro taškas nebuvo nustatytas, numatytasis taškas bus 0,0.

transform = "pasukti (45)"

Pagal numatytuosius nustatymus kampas nukreipiamas į dešinę diagramos pusę. Norėdami pasukti formą į priešingą pusę, naudokite minuso ženklą, kad pateiktumėte neigiamą vertę.

transform = "pasukti (-45)"

45 laipsnių sukimasis yra ketvirtadalio posūkis, nes kampai yra pagrįsti 360 laipsnių ratu. Jei rodomą revoliuciją kaip 360, vaizdas nepasikeis, nes tiesiog pažvelgiate į jį visame ratu, taigi galutinis rezultatas būtų toks pats, kaip ir tu, kur pradėjote.