Als u een afbeelding roteert, verandert de hoek waarop die afbeelding wordt weergegeven. Voor eenvoudige grafische afbeeldingen kan dit enige variatie en interesse toevoegen aan wat anders een eenvoudige of saaie afbeelding zou kunnen zijn. Zoals met alle transformaties werkt roteren als onderdeel van een animatie of voor een statische afbeelding. Door te leren roteren in SVG of Schaalbare Vectorafbeeldingen te gebruiken, kunt u een opvallende hoek aanvragen voor het ontwerp van uw vorm. De SVG-rotatiefunctie werkt om de afbeelding in beide richtingen te draaien.
Over roteren
De rotatiefunctie heeft alles te maken met de hoek van de afbeelding. Wanneer u een SVG-afbeelding ontwerpt, gaat u een statisch model maken dat waarschijnlijk een traditionele hoek zal hebben. Een vierkant heeft bijvoorbeeld twee zijden langs de X-as en twee langs de Y-as. Met draaien kun je datzelfde vierkant nemen en het in een diamantformatie veranderen.
Met precies dat ene effect ben je van een heel typische doos (die heel gebruikelijk is op websites) overgegaan op een diamant, wat helemaal niet gebruikelijk is en die geen interessante visuele variatie aan een ontwerp heeft toegevoegd. Roteren maakt ook deel uit van de animatiecapaciteiten in SVG. Een cirkel kan constant draaien tijdens weergave. Deze beweging kan de aandacht van bezoekers trekken en u helpen om hun ervaring te concentreren op een belangrijk gebied of elementen in een ontwerp.
Roteren werkt volgens de theorie dat één punt op de afbeelding gefixeerd blijft. Stel je een stuk papier voor dat is vastgemaakt aan karton met een punaise. De pinlocatie is de vaste plek. Als u het papier draait door een rand vast te pakken en het in een beweging met de klok mee of tegen de klok in te draaien, beweegt de punaise nooit, maar de rechthoek verandert nog steeds van hoek. Het papier zal draaien, maar het vaste punt van de pin blijft ongewijzigd. Dit lijkt erg op hoe de rotatiefunctie werkt.
Syntaxis roteren
Met roteren geeft u de hoek van de bocht en de coördinaten van het vaste gebied op.
transform = "rotate (45100100)"
De hoek van de rotatie is het eerste dat u toevoegt. In deze code is de rotatiehoek 45 graden. Het middelpunt is wat je als volgende zou toevoegen. Hier bevindt dat middelpunt zich op de coördinaten 100, 100. Als u de coördinaten van de middelste positie niet invoert, staan ze standaard op 0,0. In het onderstaande voorbeeld zou de hoek nog altijd 45 graden zijn, maar omdat het middelpunt nog niet is vastgesteld, wordt het standaard ingesteld op 0,0. transform = "rotate (45)"
Standaard gaat de hoek naar de rechterkant van de grafiek. Als u de vorm in de tegenovergestelde richting wilt roteren, gebruikt u een minteken om een negatieve waarde weer te geven. transform = "rotate (-45)"
Een draaiing van 45 graden is een kwartslag, omdat de hoeken zijn gebaseerd op een cirkel van 360 graden. Als je de revolutie opsomt als 360, zou het beeld niet veranderen omdat je het letterlijk in een volledige cirkel omdraait, zodat het eindresultaat hetzelfde zou zijn als waar je begon.
