Skip to main content

SVG Rotate Function Tutorial

Kent Hovind - Seminar 1 - The Age of The Earth [MULTISUBS] (Kan 2024)

Kent Hovind - Seminar 1 - The Age of The Earth [MULTISUBS] (Kan 2024)

Indholdsfortegnelse:

Anonim

Hvis du roterer et billede, ændres den vinkel, som billedet vises på. For simpel grafik kan dette tilføje noget sort og interesse for, hvad der ellers kan være et ligetil eller kedeligt billede. Som med alle transformationer, roterer arbejdet som en del af en animation eller for en statisk grafik. At lære at bruge rotere i SVG eller Scalable Vector Graphics giver dig mulighed for at anmode om en tydelig vinkel på din forms design. SVG-rotationsfunktionen virker til at dreje billedet i begge retninger.

Om Rotate

Rotationsfunktionen drejer sig om grafens vinkel. Når du designer et SVG-billede, skal du oprette en statisk model, der sandsynligvis sidder i en traditionel vinkel. For eksempel vil en firkant have to sider langs X-aksen og to langs Y-aksen. Med roter kan du tage det samme firkant og gøre det til en diamantformation.

Med den eneste effekt har du gået fra en meget typisk boks (som er super almindelig på hjemmesider) til en diamant, som slet ikke er almindelig, og som ikke har tilføjet noget interessant visuelt sortiment til et design. Rotere er også en del af animationskapaciteten i SVG. En cirkel kan dreje konstant, mens den vises. Denne bevægelse kan gøre besøgende opmærksom og hjælpe dig med at fokusere deres erfaring på nøgleområde eller elementer i et design.

Rotér værker på teorien om, at en prikk på billedet forbliver løst. Forestil dig et stykke papir fastgjort til pap med en push-pin. Stiftets placering er det faste sted. Hvis du drejer papiret ved at gribe en kant og roterer den med uret eller mod uret, bevæger du aldrig pindestiften, men rektanglet ændrer stadig vinkler. Papiret vil spinde, men stiftets faste punkt forbliver uændret. Det ligner meget på, hvordan rotationsfunktionen fungerer.

Rotér syntaks

Med rotationen angiver du vinklen på svinget og koordinaterne for det faste område.

omdanne = "rotate (45.100.100)"

Rotationsvinklen er den første, du tilføjer. I denne kode er rotationsvinklen 45 grader. Centrets punkt er det, du vil tilføje næste. Her ligger midtpunktet i koordinaterne 100, 100. Hvis du ikke indtaster midterpositionskoordinater, vil de som standard blive 0,0. I eksemplet nedenfor vil vinklen stadig være 45 grader, men da midtpunktet ikke er blevet fastslået, vil det være standard til 0,0.

omdanne = "rotate (45)"

Som standard går vinklen mod højre side af grafen. For at dreje formen i den modsatte retning bruger du et minustegn til at angive en negativ værdi.

omdanne = "rotate (-45)"

En 45-graders rotation er kvart omgang, da vinklerne er baseret på en 360-graders cirkel. Hvis du oplister revolutionen som 360, vil billedet ikke ændres, fordi du bogstaveligt taler om det i en fuld cirkel, så slutresultatet ville være identisk med udseendet til hvor du begyndte.