Rotering av et bilde vil endre vinkelen som bildet vises på. For enkel grafikk kan dette legge til litt variasjon og interesse for det som ellers kan være et enkelt eller kjedelig bilde. Som med alle transformasjoner, roterer fungerer som en del av en animasjon eller for en statisk grafikk. Lær hvordan du kan rotere i SVG, eller Scalable Vector Graphics, lar deg be om en tydelig vinkel på formens design. SVG-roteringsfunksjonen fungerer for å snu bildet i begge retninger.
Om Rotate
Rotasjonsfunksjonen handler alt om vinkelen på grafikken. Når du designer et SVG-bilde, skal du lage en statisk modell som sannsynligvis sitter i en tradisjonell vinkel. For eksempel vil et firkant ha to sider langs X-aksen og to langs Y-aksen. Med rotasjon kan du ta det samme torget og gjøre det til en diamantformasjon.
Med den eneste effekten har du gått fra en veldig typisk boks (som er super vanlig på nettsteder) til en diamant, som ikke er vanlig i det hele tatt, og som ikke har gitt noen interessant visuell variasjon til et design. Rotere er også en del av animasjonskapasiteten i SVG. En sirkel kan slå konstant mens den vises. Denne bevegelsen kan trekke oppmerksomheten til besøkende og hjelpe deg med å fokusere sin erfaring på viktige områder eller elementer i et design.
Roter arbeid på teorien om at en prikk på bildet vil forbli fast. Tenk deg et stykke papir festet til papp med trykknapp. Stiftposisjonen er det faste punktet. Hvis du vrir papiret ved å ta en kant og roterer den med klokken eller mot urviseren, beveger pekepinnen aldri, men rektangelet endrer vinkler. Papiret spinner, men det faste punktet på tappen forblir uendret. Dette ligner veldig på hvordan rotasjonsfunksjonen fungerer.
Roter syntaxen
Med rotasjon angir du vinkelen på sving og koordinatene til det faste området.
transform = "Roter (45,100,100)"
Rotasjonsvinkelen er den første du legger til. I denne koden er rotasjonsvinkelen 45 grader. Midtpunktet er det du vil legge til neste. Her ligger senterpunktet på koordinatene 100, 100. Hvis du ikke angir senterposisjonskoordinater, vil de som standard bli 0,0. I eksemplet nedenfor vil vinkelen fortsatt være 45 grader, men siden midtpunktet ikke er fastslått, vil det bli standard på 0,0. transform = "Roter (45)"
Som standard går vinkelen mot høyre side av grafen. For å rotere formen i motsatt retning, bruker du et minustegn for å oppgi en negativ verdi. transform = "Roter (-45)"
En 45-graders rotasjon er kvart omgang siden vinklene er basert på en 360 grader sirkel. Hvis du opplister revolusjonen som 360, vil bildet ikke endres fordi du bokstavelig talt snu den i en full sirkel, så sluttresultatet ville være identisk i utseende til hvor du begynte.
