SVG-da qanday qilib aylanishni bilib oling

Ölçeklenebilir Vektörel Grafika Aylantirish Funktsiyani

Rasmni aylantirish tasvirni aks ettiradigan burchakni o'zgartiradi. Oddiy grafikalar uchun, bu oddiy yoki zerikarli rasm bo'lishi mumkin bo'lgan narsalarga qiziqish va qiziqish qo'shishi mumkin. Barcha o'zgarishlarda bo'lgani kabi, aylantirish ham animatsiyaning bir qismi yoki statik grafik uchun ishlaydi. SVG yoki Scalable Vector Graphics da aylantirishni qanday qo'llashni o'rganish sizning shakingiz dizayni uchun alohida burchak talab qilish imkonini beradi. SVG aylantirish vazifasi tasvirni har tomonga aylantirish uchun ishlaydi.

Rotate haqida

Qaytish funktsiyasi grafikaning burchagi haqida. Agar siz SVG tasvirini loyihalashtirsangiz, an'anaviy burchakda o'tiradigan statik modelni yaratasiz. Misol uchun, kvadrat X eksa bo'ylab ikki tomonga va ikkala Y o'qi bo'ylab bo'ladi. Aylantirish bilan siz o'sha kvadratni olmaysiz va olmos shakliga aylantirasiz.

Faqatgina bitta effekt bilan siz juda oddiy odatiy qutidan (veb-saytlarda juda keng tarqalgan) olmosga aylanasiz, bu umumiy bo'lmagan va dizaynga qiziqarli ingl. Turlarini qo'shmagan. Rotating SVG da animatsiya imkoniyatlarining bir qismidir. Bir doirada ko'rsatilayotganda doimo yoqib qo'yilishi mumkin. Ushbu harakat tashrif buyuruvchilarning diqqatini jalb qilishi va o'z tajribasini asosiy sohada yoki dizayndagi elementlarga qaratishga yordam beradi.

Rasmda bir nuqta sobit turadigan nazariyadagi ishlarni aylantirish. Kartonga biriktirilgan qog'ozni surma-pin bilan tasavvur qiling. PIN-manzil doimiy nuqta hisoblanadi. Agar siz qog'ozni chetga burib, uni soat yo'nalishi bo'yicha yoki soat yo'nalishi bo'yicha harakatga aylantirib aylantirsangiz, itgich hech qachon harakat qilmaydi, lekin dikdörtgich hali burchaklarni o'zgartiradi. Qog'oz o'raladi, lekin pinning sobit nuqtasi o'zgarishsiz qoladi. Bu qaytish funksiyasi qanday ishlashiga juda o'xshaydi.

Sintaksisni aylantirish

Qaytganingizda siz burilish burchagini va belgilangan maydonning koordinatalarini keltirasiz.

transform = "aylantirish (45,100,100)"

Burilish burchagi siz qo'shgan birinchi narsa. Ushbu kodda aylanish burchagi 45 daraja. Markaz nuqtasi keyingi qo'shiladigan narsadir. Bu erda markaziy nuqta koordinatalarda 100, 100 ga teng. Agar markaz koordinatalarini kiritmasangiz, ular 0,0 ga teng bo'ladi. Quyidagi misolda burchak hali 45 daraja bo'ladi, lekin markaz nuqtasi o'rnatilmaganligi sababli, bu qiymat 0,0 ga teng bo'ladi.

transform = "aylantirish (45)"

Odatiy bo'lib, burchak grafaning o'ng tomoniga qarab ketadi. Shakli teskari yo'nalishda aylantirish uchun siz salbiy qiymatni ro'yxatlash uchun kam belgisini foydalanasiz.

transform = "aylantirish (-45)"

45 graduslik burilish, burchaklarning 360 graduslik doiraga asoslanganligi sababli, chorak burilish hisoblanadi. Inqilobni 360 deb hisoblasangiz, tasvir o'zgarmaydi, chunki siz uni to'liq aylanada aylantirasiz, natijada natija siz boshlagan joyga ko'rinishda bir xil bo'ladi.