Naučte sa otočiť v SVG

Funkcia otočenia škálovateľnej vektorovej grafiky

Otáčaním obrázku sa zmení uhol, na ktorý sa daný obrázok zobrazí. Pre jednoduchú grafiku to môže pridať určitú rozmanitosť a záujem o to, čo inak môže byť priamočiare alebo nudný obraz. Rovnako ako u všetkých transformácií, rotácia funguje ako súčasť animácie alebo statickej grafiky. Naučiť sa používať otočenie v SVG alebo škálovateľná vektorová grafika vám umožňuje požadovať odlišný uhol tvaru vášho tvaru. Funkcia otočenia SVG slúži na otočenie obrazu v oboch smeroch.

Informácie o otočení

Funkcia otočenia sa týka len uhla grafiky. Keď navrhujete obrázok SVG , vytvoríte statický model, ktorý pravdepodobne sedí v tradičnom uhle. Napríklad, štvorec bude mať dve strany pozdĺž osi X a dve pozdĺž osi Y. S otočením môžete mať to isté námestie a premeniť ho na diamantovú formáciu.

S tým jediným efektom ste prešli z veľmi typickej krabice (ktorá je na webových stránkach bežná) na diamant, ktorý vôbec nie je bežný a ktorý nepridáva dizajnu zaujímavú vizuálnu rozmanitosť. Otočenie je tiež súčasťou animačných kapacít v SVG. Počas zobrazovania sa kruh môže neustále obracať. Tento pohyb môže upozorniť návštevníkov a pomôcť vám zamerať svoje skúsenosti na kľúčové oblasti alebo prvky v dizajne.

Otočiť pracuje na teórii, že jedna bodka na obrázku zostane pevná. Predstavte si kus papiera pripevnený k lepenke pomocou push-pinu. Poloha pinov je pevnou pozíciou. Ak otočíte papier potiahnutím okraja a jeho otáčaním v smere hodinových ručičiek alebo proti smeru pohybu hodinových ručičiek, tlačový kolík sa nikdy nepohne, ale obdĺžnik stále mení uhly. Papier sa bude otáčať, ale pevný bod čapu zostane nezmenený. Toto je veľmi podobné tomu, ako funguje funkcia otáčania.

Otočiť syntax

S otočením zobrazíte uhol otočenia a súradnice pevnej plochy.

transformácia = "otáčať (45100100)"

Uhol otočenia je prvá vec, ktorú pridáte. V tomto kóde je uhol natočenia 45 stupňov. Centrálnym bodom je to, čo by ste pridali ďalej. Tu sa nachádza stredový bod na súradniciach 100, 100. Ak nezadáte súradnice stredovej polohy, budú predvolene 0,0. V nižšie uvedenom príklade by bol uhol stále 45 stupňov, ale keďže stredový bod nebol stanovený, bude predvolene 0,0.

transformácia = "otáčania (45)"

Predvolene sa uhol približuje k pravej strane grafu. Ak chcete otočiť tvar v opačnom smere, použijete znamienko mínus na vygenerovanie zápornej hodnoty.

transformácia = "otáčať (-45)"

45-stupňová rotácia je štvrť otáčky, pretože uhly sú založené na 360-stupňovom kruhu. Ak vyberiete revolúciu ako 360, obraz sa nezmení, pretože doslova ju preklopíte v plnom kruhu, takže výsledok by bol identický vzhľadom k tomu, odkiaľ ste začali.