Lugege, kuidas pöörata SVG-s

Scalable Vector Graphics pööramine funktsioon

Kujutise pööramine muudab nurka, mida see pilt kuvatakse. Lihtsa graafika puhul võib see lisada mõningast mitmekesisust ja huvi, mis muidu võiks olla otsene või igav pilt. Nagu kõigi teisenduste puhul, pöörake teoseid animatsiooni või staatilise graafika osana. SVG pöörlemise või skaleeritavate vektorgraafikute kasutamine võimaldab teil taotleda oma kuju kujundusele erinevat nurka. SVG pööramise funktsioon töötab pildi pööramiseks mõlemas suunas.

Pöörake

Pööramine on kõik graafika nurga all. SVG kujutise kujundamisel loote staatilise mudeli, mis tõenäoliselt asetub traditsioonilise nurga alla. Näiteks on nelinurga pind X-teljel ja kaks Y-teljel mööda kahte külge. Pöörake võite võtta sama ruudu ja muuta see teemandikeks.

Selle ühe efektiga olete läinud väga tüüpilisest kastist (mis on veebilehtedel ülimalt levinud) teemandile, mis ei ole üldlevinud ja mis ei ole disainile mingit huvitavat visuaalset sorti. Pööra on ka SVG-i animeerimisvõimaluste osa. Ring võib kuvamise ajal pidevalt muutuda. See käik võib juhtida külastajate tähelepanu ja aidata teil keskenduda oma kogemustele disaini põhivaldkonnas või elementides.

Pöörake teoreetilisi teoseid, et üks punkt pildile jääb fikseeritud. Kujutlege paberit, mis on kinnitatud puderpaberi külge. Kinnituskoht on kindel koht. Kui lülitate paberi välja, haarates serva ja pöörates seda päripäeva või vastupäeva, ei lükata pingutusrull kunagi, vaid ristkülik muutub nurga all. Paber pöörleb, kuid pinuse fikseeritud punkt jääb samaks. See on väga sarnane sellele, kuidas pöörlemisfunktsioon töötab.

Pööra süntaksit

Pöörake, loetledes pööramise nurk ja fikseeritud piirkonna koordinaadid.

transform = "pöörata (45 100 100)"

Pöörlemisnurk on esimene asi, mida lisate. Selles koodis on pöördenurk 45 kraadi. Keskpunktiks on see, mida te järgmisena lisada. Siin asub selle keskpunkti koordinaadid 100, 100. Kui te ei sisesta keskpunkti koordinaate, siis on need vaikimisi 0,0. Järgnevas näites on nurk ikkagi 45 kraadi, kuid kuna keskpunkti ei ole tuvastatud, on vaikimisi väärtus 0,0.

transform = "pöörata (45)"

Vaikimisi asub nurk graafiku parempoolsesse poole. Kuju pööramiseks vastupidises suunas saate negatiivse väärtuse loendi jaoks kasutada miinusmärki.

transform = "pöörata (-45)"

45-kraadine pöörlemine on veerand pööret, kuna nurgad põhinevad 360-kraadisel ringil. Kui loete revolutsiooni 360-na, siis pilt ei muutu, sest sa sõid otseses mõttes selle ümber kogu ringi, nii et lõpptulemus oleks välimuselt samas kohas, kus sa hakkasid.