Saznajte kako se rotirati u SVG

Skalabilna vektorska grafika Rotira funkcija

Rotiranje slike će promeniti ugao na kome se slika prikazuje. Za jednostavnu grafiku ovo može dodati nekoliko različitosti i interesovanja za ono što inače može biti direktna ili dosadna slika. Kao i kod svih transformacija, rotirati rad kao deo animacije ili statične grafike. Naučite kako koristiti okretanje u SVG ili Scalable Vector Graphics , omogućava vam da odaberete poseban ugao u obliku vašeg oblika. Funkcija rotiranja SVG-a radi okretanje slike u bilo kom smeru.

O Rotate

Funkcija rotacije je sve oko ugla grafike. Kada dizajnirate SVG sliku , kreirate statički model koji će verovatno sedeti pod tradicionalnim uglom. Na primer, kvadrat će imati dvije strane duž X-osi i dva duž Y-osi. Sa rotiranjem, možete da uzmete isti kvadrat i pretvorite ga u dijamantsku formaciju.

Sa samo jednim efektom, otišli ste iz vrlo tipične kutije (koja je vrlo česta na web stranicama) do dijamanta, što uopšte nije uobičajeno i koje nije dodalo neku interesantnu vizuelnu varijantu u dizajn. Rotiranje je takođe deo animacionih kapaciteta u SVG-u. Krug se može konstantno okrenuti dok se prikazuje. Ovaj predlog može privući pažnju posjetilaca i pomoći vam da fokusirate svoje iskustvo na ključnom području ili elementima u dizajnu.

Rotirajte radove na teoriji da će jedna tačka na slici ostati fiksirana. Zamislite parče papira pričvršćene za karton s push-pinom. Lokacija pin je fiksna tačka. Ako okrenete papir hvatanjem ivice i okretanjem u smeru kazaljke na satu ili u suprotnom smeru kazaljke na satu, taster nikada ne pomera, ali pravougaonik i dalje menja uglove. Papir će se okretati, ali fiksna tačka pina ostaje nepromenjena. Ovo je vrlo slično funkcionisanju rotate funkcije.

Rotiraj sintaksu

Sa okretanjem, navedite ugao okreta i koordinate fiksne oblasti.

transform = "rotirati (45.100.100)"

Ugao rotacije je prva stvar koju dodate. U ovom kodu, ugao rotacije je 45 stepeni. Središnja tačka je ono što ćete dodati sledeće. Ovde, ta tačka centriranja se nalazi na koordinatama 100, 100. Ako ne uđete u koordinate centralnog položaja, oni će se podrazumevati na 0,0. U primeru ispod, ugao bi i dalje bio 45 stepeni, ali pošto središnja tačka nije utvrđena, ona će se podrazumevati na 0,0.

transform = "rotiraj (45)"

Podrazumevano, ugao ide prema desnoj strani grafikona. Za okretanje oblika u suprotnom pravcu, koristite znak minus da navedete negativnu vrednost.

transform = "rotirati (-45)"

Rotacija od 45 stepeni je četvrtina okreta pošto su uglovi zasnovani na krugu od 360 stepeni. Ako revoluciju navedete kao 360, slika se ne bi mijenjala, jer se bukvalno flipira u punom krugu, tako da je krajnji rezultat identičan po izgledu gdje ste počeli.