Saznajte kako rotirati u SVG

Scalable Vector Graphics rotirajuća funkcija

Zakretanje slike će promijeniti kut na kojem se ta slika prikazuje. Za jednostavnu grafiku, to može dodati raznolikost i zanimanje za ono što inače može biti jednostavna ili dosadna slika. Kao i kod svih transformacija, okretati se radi kao dio animacije ili za statičku grafiku. Učenje upotrebe okretanja u SVG ili Scalable Vector Graphics omogućuje vam da zatražite odvojeni kut oblikovanju oblika. SVG rotirajuća funkcija okreće sliku u bilo kojem smjeru.

O Zakretanju

Funkcija rotacije je sve o kutu grafike. Kada dizajnirate SVG sliku , stvorit ćete statički model koji će vjerojatno sjediti pod tradicionalnim kutom. Na primjer, kvadrat će imati dvije strane duž X-osi i dvije duž Y-osi. Kada se zakrećite, možete uzeti taj isti kvadrat i pretvoriti ga u dijamantnu formaciju.

S tim jednim efektom, otišli ste iz vrlo tipične kutije (koja je super uobičajena na web stranicama) dijamantu, koja uopće nije uobičajena i koja nije dodala zanimljivu vizualnu raznolikost dizajnu. Rotiranje je također dio animiranog kapaciteta u SVG-u. Krug se može stalno pretvoriti dok se prikazuje. Ovaj prijedlog može privući pozornost posjetitelja i pomoći vam da svoje iskustvo usredotočite na ključno područje ili elemente u dizajnu.

Zakreni radove na teoriji da će jedna točka na slici ostati fiksna. Zamislite komad papira koji je pričvršćen za karton s push-pinom. Položaj mjesta je fiksno mjesto. Ako okrenete papir tako da uhvatite rub i okrećete ga u smjeru kazaljke na satu ili u smjeru suprotnom od kazaljke na satu, gibak se nikada ne pomiče, ali pravokutnik i dalje mijenja kutove. Papir će se okretati, ali fiksna točka igle ostaje nepromijenjena. To je vrlo slično načinu funkcioniranja rotacije.

Zakrenite sintaksa

Kada se zakrenete, navodite kut zakretanja i koordinate fiksnog područja.

transformacije = „rotirati (45.100.100)”

Kut rotacije prva je stvar koju dodate. U ovom kodu kut rotacije je 45 stupnjeva. Središnja točka je ono što biste sljedeće dodali. Ovdje središnja točka sjedi na koordinatama 100, 100. Ako ne unesete koordinate središnjeg položaja, postavit će se na 0,0. U donjem primjeru, kut bi i dalje bio 45 stupnjeva, ali budući da središnja točka nije uspostavljena, postavit će se na 0,0.

transformacije = "zakretanje (45)"

Prema zadanim postavkama kut ide prema desnoj strani grafikona. Da biste zakrenuli oblik u suprotnom smjeru, upotrijebite znak minus da biste naveli negativnu vrijednost.

transformacije = "rotirati (-45)"

Rotacija od 45 stupnjeva je četvrtina okretaja jer se kutovi temelje na krugu od 360 stupnjeva. Ako navelite revoluciju kao 360, slika se ne bi promijenila jer ste doslovno prebacili u puni krug, tako da će krajnji rezultat izgledati identično onome gdje ste počeli.