Opi kääntämään SVG: ssä

Skaalautuva vektorigrafiikan kiertotoiminto

Kuvan kiertäminen muuttaa sitä kulmaa, jota kuva näytetään. Yksinkertaisen grafiikan avulla tämä voi lisätä lajikkeita ja kiinnostusta siihen, mikä voi olla yksinkertainen tai tylsä ​​kuva. Kuten kaikki muutokset, pyöritä toimii osana animaatiota tai staattiselle grafiikalle. Oppiminen kiertääksesi SVG: ssä tai skaalautuvissa vektorigrafiikissa antaa sinulle mahdollisuuden pyytää erityistä kulmaa muotosi suunnittelussa. SVG-kiertotoiminto toimii kuvan kääntämiseksi kumpaankin suuntaan.

Kierrä

Kiertotoiminto on kyse graafin kulmasta. Kun suunnittelet SVG-kuvaa , aiot luoda staattisen mallin, joka todennäköisesti istuu perinteisellä kulmalla. Esimerkiksi neliöllä on kaksi sivua pitkin X-akselia ja kaksi pitkin Y-akselia. Pyöritettäessä voit ottaa saman neliön ja muuttaa sen timanttikokoonpanoksi.

Vain yksi vaikutus, olet mennyt erittäin tyypillisestä laatikosta (joka on erittäin yleistä verkkosivuilla) timanttiin, joka ei ole lainkaan yleinen ja joka ei ole lisännyt mielenkiintoista visuaalista lajiketta muotoiluun. Kiertäminen on myös osa SVG: n animaatiokapasiteettia. Ympyrä voi jatkuvasti muuttua näytettäessä. Tämä liike voi kiinnittää kävijöiden huomion ja auttaa sinua keskittymään kokemukseensa avainalueelle tai elementteihin suunnittelussa.

Kierrä teos siitä, että yksi piste kuvassa pysyy kiinteänä. Kuvittele paperille kiinnitetty pahvipuristinpala. Pin-sijainti on kiinteä paikka. Jos kääntäkää paperia tarttumalla reunaan ja pyörittämällä sitä myötäpäivään tai vastapäivään, työntöaukko ei koskaan liikkua, mutta suorakulmio edelleen muuttaa kulmia. Paperi pyörii, mutta pistokkeen kiinteä piste pysyy muuttumattomana. Tämä on hyvin samankaltainen kuin kiertotoiminto toimii.

Kierrä syntaksi

Kierrättäessä luetellaan käännöksen kulma ja kiinteän alueen koordinaatit.

muunnos = "rotate (45100100)"

Kiertokulma on ensimmäinen asia, jonka lisäät. Tässä koodissa pyörimisnopeus on 45 astetta. Keskipiste on seuraava. Tässä keskipiste istuu koordinaateissa 100, 100. Jos et anna keskipisteen koordinaatteja, ne ovat oletusarvoisesti 0,0. Alla olevassa esimerkissä kulma olisi edelleen 45 astetta, mutta koska keskipistettä ei ole määritetty, sen oletusarvo on 0,0.

muunnos = "kierto (45)"

Oletusarvoisesti kulma kulkee kaavion oikealla puolella. Jos haluat kääntää muotoa vastakkaiseen suuntaan, käytä miinusmerkkiä negatiivisen arvon listaamiseksi.

muunnos = "rotate (-45)"

45 asteen kierto on neljäsosa käännöksestä, koska kulmat perustuvat 360 asteen ympyrään. Jos valitset vallankumouksen 360: ksi, kuva ei muuttuisi, koska olet kirjaimellisesti kääntänyt sen täyteen ympyrään, joten lopputulos olisi identtinen ulkonäön suhteen missä aloitit.