Lernu kiel ruliĝi en SVG

Skaleblaj Vektoraj Grafikaĵoj Rotacias Funkcion

Rotacio de bildo ŝanĝos la angulon, kiun tiu bildo montriĝos ĉe. Por simplaj grafikoj, ĉi tio povas aldoni iom da vario kaj intereso al kio eble estu simpla aŭ enuiga bildo. Kiel kun ĉiuj transformoj, turnu laborojn kiel parton de kuraĝigo aŭ por statika grafikaĵo. Lerni kiel uzi rotacion en SVG, aŭ Scalable Vector Graphics , permesas al vi peti distingan angulon al la dezajno de via formo. La SVG-rotacio funkcias por turni la bildon en ambaŭ direktoj.

Pri Rotacio

La rotacia funkcio estas ĉio pri la angulo de la grafikaĵo. Kiam vi desegnas SVG-bildon , vi kreos statikan modelon, kiu probable sidiĝos ĉe tradicia angulo. Ekzemple, kvadrato havos du flankojn laŭ la X-akso kaj du laŭ Y-akso. Kun rotacio, vi povas preni tiun saman kvadraton kaj turni ĝin en diamantan formadon.

Kun nur tiu efiko vi eliris el tre tipa skatolo (kiu estas super komuna en retejoj) al diamanto, kiu tute ne estas komuna kaj kiu ne aldonis iun interesan vidan varion al dezajno. Rotacio ankaŭ estas parto de la kuraĝaj kapabloj en SVG. Rondo povas turni senĉese dum montriĝo. Ĉi tiu movado povas altiri la atenton de vizitantoj kaj helpi vin al fokuso ilian sperton sur ŝlosila areo aŭ elementoj en dezajno.

Rotu laborojn sur la teorio, ke unu punkto sur la bildo restos fiksita. Imagu pecon da papero ligita al kartono kun push-pin. La pinglo situo estas la fiksa loko. Se vi turnas la paperon kaptante randon kaj turnante ĝin en horloĝo aŭ kontraŭhorloĝaj movoj, la push-pin neniam moviĝas, sed la rektangulo ankoraŭ ŝanĝas angulojn. La papero turniĝos, sed la fiksita punkto de la pinglo restas senŝanĝa. Ĉi tio estas tre simila al kiel funkcias la rotacia funkcio.

Turni sintakson

Kun rotacio, vi listigas la angulon de la turno kaj la koordinatoj de la fiksita areo.

transformi = "turni (45,100,100)"

La angulo de la turnado estas la unua afero, kiun vi aldonas. En ĉi tiu kodo, la angulo de rotacio estas 45-gradoj. La centra punkto estas tio, kion vi aldonos poste. Ĉi tie, tiu centra punkto sidas ĉe koordinatoj 100, 100. Se vi ne eniras la centrajn poziciajn koordinatojn, ili implicite estos 0,0. En la sekva ekzemplo, la angulo ankoraŭ estus 45-gradoj, sed ĉar la centra punkto ne estis establita, ĝi estos defaŭlta al 0,0.

transformi = "turni (45)"

Defaŭlte, la angulo iras al la dekstra flanko de la grafikaĵo. Por turni la formon en la kontraŭa direkto, vi uzas minus signon por listigi negativan valoron.

transformi = "turni (-45)"

45-grada rotacio estas kvara turno ekde la anguloj estas bazitaj sur 360-grada cirklo. Se vi listigas la revolucion kiel 360, la bildo ne ŝanĝus ĉar vi laŭvorte flugas ĝin en plena cirklo, do la fina rezulto estus identa aspekto al kie vi komencis.