Tanulj meg forgatni az SVG-ben

Skálázható vektoros grafika elforgatási funkciója

A kép elforgatása megváltoztatja azt a szöget, amelyiken a kép megjelenik. Az egyszerű grafikákhoz ez sokféleséget és érdeklődést jelenthet ahhoz, ami egyébként egyenes vagy unalmas kép. Mint minden transzformációhoz, az animáció részeként vagy egy statikus grafika részeként forgatható. Az SVG-vel vagy Scalable Vector Graphics- el való forgatás használatának megtanulása lehetővé teszi, hogy különálló szöget zárjon be az alakzat kialakításához. Az SVG forgatás funkció a kép mindkét irányú forgatásához használható.

A Forgatásról

A forgatás funkció a grafika szögétől függ. Amikor SVG képet tervez, létrehoz egy statikus modellt, amely valószínűleg hagyományos szögben ül. Például egy négyzetnek két oldala van az X tengely mentén és két Y-tengely mentén. A forgatással ugyanazt a négyzetet veheti át, és gyémánt alakúvá alakíthatja.

Ezzel egy effektust használva egy nagyon tipikus dobozból (ami szuper gyakori a weboldalakon) elment egy gyémántra, amely egyáltalán nem általános, és amely nem adott hozzá érdekes vizuális változatot a designhoz. A forgatás szintén része az SVG animációs kapacitásának. Egy kör folyamatosan bekapcsolódhat a megjelenítéskor. Ez a mozgás felhívhatja a figyelmet a látogatókra, és segít a tapasztalatainak a kulcsfontosságú területre vagy elemekre koncentrálni.

Az elforgatás úgy működik, hogy az egyik pont a képen marad. Képzeljen el egy papírt a kartonhoz egy nyomócsappal. A tű helye a rögzített hely. Ha a papírt egy óramutató járásával megegyező irányban forgatja el, és az óramutató járásával ellentétes irányba forgatja, a tolókapu soha nem mozog, de a téglalap még mindig szögeket vált. A papír elfordul, de a tű rögzített pontja változatlan marad. Ez nagyon hasonlít a forgatás funkció működéséhez.

Forgassa el a szintaxist

A forgatással felsoroljuk a fordulás szögét és a rögzített terület koordinátáit.

transzformáció = „Forgatás (45.100.100)”

A forgatás szöge az első dolog, amit hozzáad. Ebben a kódban a forgásszög 45 fok. A központi pont az, amit hozzá szeretnél adni. Itt a centrális pont a 100, 100 koordinátákon ül. Ha nem ad meg középpozíciós koordinátákat, akkor alapértelmezés szerint 0,0. Az alábbi példában a szög még mindig 45 fok, de mivel a középpontot még nem sikerült megállapítani, akkor alapértelmezés szerint 0,0 lesz.

transzformáció = "Forgatás (45)"

Alapértelmezés szerint a szög a grafikon jobb oldalán halad. Ha az alakot az ellenkező irányba forgatja, a negatív értékek listájához mínusz jelet használ.

transzformáció = "Forgatás (-45)"

A 45 fokos forgatás negyedfordulós, mivel a szögek egy 360 fokos körön alapulnak. Ha a 360-as forradalmat listázza, akkor a kép nem változik, mert szó szerint teljesen körbefordul, így a végeredmény megegyezik a megjelenés helyével.