Att rotera en bild ändrar den vinkel som den bilden visas på. För enkel grafik kan detta lägga till lite variation och intresse för vad som annars kan vara en enkel eller tråkig bild. Som med alla transformationer, roterar fungerar som en del av en animation eller för en statisk grafik. Lär dig hur du använder rotera i SVG eller Scalable Vector Graphics, så att du kan begära en distinkt vinkel mot din forms design. SVG-rotationsfunktionen fungerar för att vända bilden i båda riktningarna.
Om Rotate
Rotationsfunktionen handlar om grafikens vinkel. När du designar en SVG-bild kommer du att skapa en statisk modell som troligen kommer att sitta i en traditionell vinkel. Till exempel kommer en kvadrat att ha två sidor längs X-axeln och två längs Y-axeln. Med rotera kan du ta samma ruta och förvandla den till en diamantformation.
Med den enda effekten har du gått från en mycket typisk låda (som är super vanlig på webbplatser) till en diamant som inte är vanligt alls och som inte har lagt till några intressanta visuella variationer i en design. Rotate är också en del av animeringskapaciteten i SVG. En cirkel kan vända ständigt medan den visas. Denna rörelse kan dra upp besökarnas uppmärksamhet och hjälpa dig att fokusera sin erfarenhet på nyckelområden eller element i en design.
Rotera verk på teorin om att en punkt på bilden kommer att förbli fixerad. Föreställ dig ett papper fäst på papp med en tryckstift. Stiftplatsen är den fasta platsen. Om du vrider papperet genom att ta tag i en kant och roterar den medurs medurs eller motsols rörs röret aldrig, men rektangeln ändrar ändå vinklar. Papperet kommer att snurra, men stiftets fasta punkt förblir oförändrat. Detta liknar mycket hur rotationsfunktionen fungerar.
Rotera syntaxen
Med rotera listar du vinkeln för svängen och koordinaterna för det fasta området.
omvandla = "rotate (45.100.100)"
Rotationsvinkeln är den första du lägger till. I denna kod är rotationsvinkeln 45 grader. Mittpunkten är vad du skulle lägga till nästa. Här ligger mittpunkten vid koordinaterna 100, 100. Om du inte anger mittpositionskoordinater, kommer de som standard till 0,0. I exemplet nedan skulle vinkeln fortfarande vara 45 grader, men eftersom mittpunkten inte har fastställts, kommer den att gå till 0,0. omvandla = "rotate (45)"
Som standard går vinkeln mot den högra sidan av grafen. För att rotera formen i motsatt riktning använder du ett minustecken för att ange ett negativt värde. omvandla = "rotate (-45)"
En 45-graders rotation är en kvart vändning eftersom vinklarna är baserade på en 360 graders cirkel. Om du listar revolutionen som 360, skulle bilden inte förändras eftersom du bokstavligen vrider den i en hel cirkel, så slutresultatet skulle vara identiskt utseende där du började.
