Leer hoe om in SVG te draai

Skaalbare Vectorgrafika Rotate Funksie

As jy 'n beeld roteer, verander die hoek waarmee die prentjie vertoon word. Vir eenvoudige grafika kan dit 'n mate van verskeidenheid en belangstelling toevoeg tot wat andersins 'n reguit of vervelige beeld kan wees. Soos met alle transformasies, draai werk as deel van 'n animasie of vir 'n statiese grafiese. Leer hoe om te gebruik rotasie in SVG, of Scalable Vector Graphics , kan u 'n duidelike hoek aan die ontwerp van u vorm aanvra. Die SVG rotasie funksie werk om die beeld in enige rigting te draai.

Oor Rotate

Die rotasie funksie gaan alles oor die hoek van die grafiese. Wanneer jy 'n SVG-beeld ontwerp, gaan jy 'n statiese model skep wat waarskynlik op 'n tradisionele hoek sal sit. Byvoorbeeld, 'n vierkant het twee kante langs die X-as en twee langs die Y-as. Met rotasie kan jy dieselfde vierkant neem en dit in 'n diamantvorming verander.

Met net die een effek het jy gegaan van 'n baie tipiese boks (wat algemeen op webwerwe voorkom) tot 'n diamant wat glad nie algemeen is nie en wat nie 'n interessante visuele verskeidenheid aan 'n ontwerp toegevoeg het nie. Rotate is ook deel van die animasie vermoëns in SVG. 'N Sirkel kan gedurig draai terwyl dit vertoon word. Hierdie beweging kan die aandag van besoekers vestig en jou help om hul ervaring op sleutelgebied of elemente in 'n ontwerp te fokus.

Draai werke op die teorie dat een punt op die beeld vasgestel sal word. Stel jou voor 'n stuk papier wat met karton vasgemaak is. Die penpunt is die vaste plek. As jy die papier draai deur 'n rand te gryp en dit in 'n kloksgewys of kloksgewys beweging draai, beweeg die drukpen nooit, maar die reghoek verander nog hoeke. Die papier sal draai, maar die vaste punt van die pen bly onveranderd. Dit is baie soortgelyk aan hoe die rotasie funksie werk.

Draai sintaksis

Met rotasie gee jy die hoek van die beurt en die koördinate van die vaste area.

omskep = "draai (45100100)"

Die hoek van die rotasie is die eerste ding wat jy byvoeg. In hierdie kode is die rotasiehoek 45 grade. Die middelpunt is wat u volgende sal byvoeg. Hier sit die middelpunt by koördinate 100, 100. As u nie die middelpuntkoördinate inskryf nie, sal hulle verstek wees tot 0,0. In die onderstaande voorbeeld sal die hoek nog 45 grade wees, maar aangesien die middelpunt nie vasgestel is nie, sal dit verstek wees tot 0,0.

omskep = "draai (45)"

Standaard gaan die hoek na die regterkant van die grafiek. Om die vorm in die teenoorgestelde rigting te draai, gebruik jy 'n minusteken om 'n negatiewe waarde te lys.

omskep = "draai (-45)"

'N Rotasie van 45 grade is 'n kwartwisseling aangesien die hoeke op 'n 360 grade sirkel gebaseer is. As jy die rewolusie as 360 noem, sal die prentjie nie verander nie, omdat jy dit letterlik in 'n vol sirkel draai, sodat die eindresultaat identies sal wees in die voorkoms van waar jy begin het.