Pelajari Cara Berputar di SVG

Scalable Vector Graphics Rotate Function

Memutar gambar akan mengubah sudut mana gambar itu ditampilkan. Untuk grafik sederhana, ini dapat menambahkan beberapa variasi dan minat terhadap apa yang mungkin menjadi gambar yang langsung atau membosankan. Seperti semua transformasi, memutar karya sebagai bagian dari animasi atau untuk grafik statis. Mempelajari cara menggunakan rotate dalam SVG, atau Scalable Vector Graphics , memungkinkan Anda untuk meminta sudut yang berbeda pada desain bentuk Anda. Fungsi rotasi SVG berfungsi untuk mengubah gambar ke salah satu arah.

Tentang Rotate

Fungsi rotasinya adalah tentang sudut dari grafik. Saat Anda mendesain gambar SVG , Anda akan membuat model statis yang mungkin akan duduk pada sudut tradisional. Misalnya, persegi akan memiliki dua sisi sepanjang sumbu X dan dua sepanjang sumbu Y. Dengan memutar, Anda bisa mengambil persegi yang sama dan mengubahnya menjadi formasi berlian.

Dengan hanya satu efek itu, Anda telah beralih dari kotak yang sangat khas (yang sangat umum di situs web) ke berlian, yang tidak umum sama sekali dan yang belum menambahkan beberapa variasi visual yang menarik untuk sebuah desain. Rotate juga merupakan bagian dari kapasitas animasi dalam SVG. Lingkaran dapat berubah secara konstan saat ditampilkan. Gerakan ini dapat menarik perhatian pengunjung dan membantu Anda memfokuskan pengalaman mereka pada area utama atau elemen dalam desain.

Putar bekerja pada teori bahwa satu titik pada gambar akan tetap diperbaiki. Bayangkan selembar kertas yang menempel pada karton dengan pin dorong. Lokasi pin adalah tempat tetap. Jika Anda memutar kertas dengan memegang tepian dan memutarnya dengan gerakan searah atau berlawanan arah jarum jam, pin dorong tidak pernah bergerak, tetapi persegi panjang masih mengubah sudut. Kertas akan berputar, tetapi titik tetap pin tetap tidak berubah. Ini sangat mirip dengan bagaimana fungsi rotate bekerja.

Putar Sintaksis

Dengan memutar, Anda daftar sudut belokan dan koordinat area tetap.

transform = "putar (45.100.100)"

Sudut rotasi adalah hal pertama yang Anda tambahkan. Dalam kode ini, sudut rotasi adalah 45-derajat. Titik pusat adalah apa yang akan Anda tambahkan selanjutnya. Di sini, titik pusat itu berada pada koordinat 100, 100. Jika Anda tidak memasukkan koordinat posisi tengah, mereka akan berubah menjadi 0,0. Dalam contoh di bawah ini, sudut akan tetap 45 derajat, tetapi karena titik pusat belum ditetapkan, itu akan menjadi default 0,0.

transform = "rotate (45)"

Secara default, sudutnya mengarah ke sisi kanan grafik. Untuk memutar bentuk ke arah yang berlawanan, Anda menggunakan tanda minus untuk mencantumkan nilai negatif.

transform = "rotate (-45)"

Rotasi 45 derajat adalah seperempat putaran karena sudutnya didasarkan pada lingkaran 360 derajat. Jika Anda membuat daftar revolusi sebagai 360, gambar tidak akan berubah karena Anda benar-benar membaliknya dalam lingkaran penuh, sehingga hasil akhirnya akan sama persis dengan di mana Anda mulai.