Menjelajahi SVG Bagian 2
Kustomisasi Tingkat Lanjut SVG
Pengelompokan, Definisi, Gradien
Halo Teman-teman, melalui artikel saya sebelumnya »kita telah melihat cara membuat bentuk dasar menggunakan SVG. Dengan memperluas bentuk-bentuk dasar ini, ia mampu menciptakan kreativitas SVG Anda sendiri. Di artikel ini mari kita bahas cara membuat kreativitas SVG cerdas dan mudah dengan bantuan pengelompokan dan definisi.
Dengan bantuan pengelompokan dan definisi, ia mampu mengelompokkan sekumpulan elemen SVG. Hal ini akan membantu untuk menggunakan kembali grup atau menerapkan properti umum pada grup — Mari kita beralih ke konsep mendalam di balik pengelompokan dan definisi.
Sebelum itu saya ulangi, Jika Anda tidak tahu tentang apa yang terjadi pada SVG atau cara menggambar bentuk dasar SVG, maka saya sangat menyarankan untuk membaca artikel saya sebelumnya “Semua yang perlu Anda ketahui tentang Bentuk SVG” dan datanglah kembali ke sini.
Pengelompokan
Itu dapat mengelompokkan sekumpulan elemen SVG ke dalam wadah dengan bantuan elemen ‹g›‹/g›. Keuntungan pengelompokan adalah dapat menerapkan sifat-sifat pada kelompok tersebut sehingga tercermin pada unsur-unsur yang ada dalam kelompok tersebut. Keuntungan lain dari pengelompokan adalah dapat menggunakan kembali suatu grup dengan sangat mudah, yang berarti dapat membuat duplikat kumpulan elemen yang dikelompokkan sehingga Anda dapat melewati duplikasi kode.
Mari kita pahami pengelompokannya dengan beberapa contoh.
Di sini saya menggambar daun yang ditempelkan pada tangkai daun. Ada dua definisi jalur di sini, satu untuk daun dan satu lagi untuk tangkai daun. Saya mengelompokkan kedua definisi jalur tersebut dan membuat nama untuk grup lengkap yang disebut “daun”.
Ini adalah cara membuat grup dasar. Sekarang cari tahu apa yang harus dilakukan dengan grup ini.
Elemen 'grup' mendukung sejumlah besar atribut. Perubahan nilai pada atribut ini menghasilkan elemen grupnya. Mari kita lihat beberapa atribut utama yang sering digunakan dalam grup.
Mengisi
Isi biasanya digunakan untuk mengisi seluruh kelompok elemen warna. Selain itu, dimungkinkan untuk mengganti pengisian tingkat grup dengan menambahkan atribut pengisian untuk masing-masing elemen.
Berikut adalah output dari skrip di atas
Pada contoh di atas, Anda dapat melihat bahwa pada jalur daun tidak ada atribut isian. Tapi untuk jalur tangkai daun, itu menggantikan isian hijau tua (#388E3C). Jadi pada keluarannya, Anda dapat melihat seluruh grup diganti dengan isian grup (#de3e3e) namun isian tidak diterapkan pada bagian yang diganti, tangkai daun.
Warna
Atribut color adalah untuk mendefinisikan warna. Atribut ini tidak akan langsung diterapkan pada sub-elemen. Untuk menerapkan warna yang ditentukan, Anda perlu menetapkan nilai sebagai 'warna saat ini' untuk atribut seperti isian, guratan, warna berhenti, dan warna terang sehingga akan menggantikan nilai warna yang ditentukan pada atribut tersebut.
Mari kita lihat cara kerja warna dengan bantuan beberapa contoh.
Di sini keluarannya sangat mirip dengan keluaran contoh sebelumnya.
Pada contoh, Anda dapat melihat bahwa pada grup tersebut ditentukan warna (#de3e3e) dengan bantuan atribut color. Ia dapat menerapkan warna tersebut ke atribut elemen grup yang diisi dengan nama 'warna saat ini'. Ini akan menggantikan nilai 'warna saat ini'dengan definisi atribut warna.
Kegelapan
Ini digunakan untuk mengatur opacity elemen anak grup.
Garis Dash & Goresan Goresan
Ini untuk menyesuaikan properti terkait guratan untuk elemen grup.
Mari beralih ke beberapa contoh.
Berikut adalah keluaran lengkap dari cuplikan kode di atas.
Pada contoh di atas, diterapkan guratan warna ungu dengan lebar 3 dan menjadikannya array dasbor dengan pola 6 2. Dash-array berarti 6px pertama garis ditampilkan dan 2px berikutnya garis menjadi tersembunyi.
Mengubah
Sekarang kita beralih ke properti elemen SVG yang paling penting dan berguna. Transformasinya tidak hanya pada atribut grup, tetapi juga dapat diterapkan pada elemen. Dengan bantuan transformasi, ia mampu melakukan berbagai transformasi pada elemen atau kelompok seperti memutar, menerjemahkan atau perpindahan, kemiringan dan skala. Mari kita bahas masing-masing operasi ini secara mendetail
Menerjemahkan
Translate digunakan untuk menggusur. Terjemahan menerima dua parameter nilai sumbu x dan nilai sumbu y opsional. Berdasarkan nilai yang diberikan pada fungsi translasi, fungsi tersebut digantikan dengan nilai sumbu x dan y.
Syntax: translate(<x> [<y>]) x new position = x old position+ <x> y new position= y old position+ <y>
Mari terapkan terjemahan pada contoh daun kita.
Dalam contoh di atas, grup 'daun' menerjemahkan 500 unit langsung dari lokasi sebenarnya. Hal ini karena panggilan transformasi translate(500,0).
Skala
Ini digunakan untuk mengubah ukuran grup atau elemen. Ia menerima dua angka faktor skala x dan faktor skala y. Jika tidak diberikan nilai y maka diasumsikan kedua nilai tersebut sama
Syntax: scale(<x> [<y>]) Here <x> — Scaling factor for x-axis. <y> — Scaling factor for y-axis.
Mari kita lihat cara kerja transformasi skala pada contoh daun kita
Dalam contoh di atas, saya menerapkan dua transformasi untuk daun grup. Salah satunya adalah saya menerjemahkan posisinya ke 500 unit ke kanan (Seperti yang kita lihat pada contoh sebelumnya) juga menerapkan faktor skala x dan y sebesar 0,5 yang akan memperkecil ukuran daun menjadi setengahnya.
Memutar
Rotate digunakan untuk memutar elemen atau grup. Fungsi putar menerima akses rotasi diikuti dengan titik rotasi opsional
Syntax: rotate(<a> [<x> <y>]) Here <a> — rotating angle <x> — x-axis displacement for the rotation point <y> — y-axis displacement for the rotation point
Mari kita beralih ke contohnya.
Pada contoh di atas, transformasi rotasi 30 derajat diterapkan pada titik (0,450). Hasilnya seluruh kelompok daun berputar 30 derajat berdasarkan titik (0,450).
SkewX dan SkewY
Fungsi-fungsi ini digunakan untuk memiringkan sumbu x atau y dengan suatu sudut.
Syntax: skewX(<a>)//skew along the x-axis by a degree skewY(<a>)//skew along the y-axis by a degree
Mari kita coba cara membuat kemiringan persegi panjang pada sumbu x dan y.
Di sini tunjukkan dua persegi panjang, yang satu miring pada sumbu x sebesar 10 derajat dan satu lagi miring pada sumbu y sebesar 10 derajat.
Matriks
Dengan bantuan fungsi matriks, ia dapat melakukan kombinasi semua operasi di atas. Namun ini tidak mudah, agak sulit jika dibandingkan dengan transformasi di atas.
Matriksnya adalah matriks 3X3 yang tampilannya seperti berikut
a c e b d f -----> matrix(a,b,c,d,e,f) 0 0 1
baris terbawah untuk matriks selalu sama, Jadi dalam fungsi matriks SVG hanya menerima 6 nilai dari dua baris pertama. Dengan mengubah nilai dari 6 parameter ini, ia mampu melakukan semua jenis transformasi yang telah kita bahas.
Berikut ini cara menerapkan transformasi tersebut dalam perspektif matriks
Translate
0 0 tx
0 1 ty
0 0 1
Syntax: matrix(1,0,0,1,tx,ty)
Rotate
cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1
Syntax: matrix( cos(a), sin(a),-sin(a),cos(a),0,0 )
Scale
sx 0 0
0 sy 0
0 0 1
Syntax: matrix(sx,0,0,sy,0,0)
SkewX
1 tan(a) 0
0 1 0
0 0 1
Syntax: matrix(1,0,tan(a),1,0,0)
SkewY
Skew
1 0 0
tan(a) 1 0
0 0 1
Syntax: matrix(1,tan(a),0,1,0,0)
Mari kita lihat beberapa contoh transformasi matriks.
Pada contoh di atas, logika di balik matriks adalah memutar grup sebesar 30 derajat dan menerjemahkan grup sebesar 400 satuan ke kanan. 0,5 adalah nilai sin dari 30 dan 0,866 adalah nilai cos dari 30. Masalah utama dalam transformasi matriks adalah memahami dan menerapkan logika matriks agak rumit dibandingkan dengan transformasi lainnya.
Pengelompokan Dapat Digunakan Kembali
Salah satu keuntungan super dari pengelompokan adalah dapat menggunakan kembali suatu grup. Sehingga Anda tidak ingin menulis ulang grup tersebut lagi. Ia mampu membuat grup duplikat dan dapat menerapkan transformasi yang berbeda ke grup, Hal ini dilakukan melalui tag ‹use›
Mari kita lihat cara kerja penggunaan kembali dalam kelompok dengan beberapa contoh.
Pada cuplikan kode di atas, dibuat grup yang disebut “dua daun” dengan menggabungkan grup “daun” dan refleksinya. Refleksi dibuat dengan menggunakan tag. Selain itu, ia menggunakan kembali kelompok “dua daun” dan membuat dua lapisan daun tambahan
Definisi
Definisi tersebut digunakan untuk mendefinisikan objek grafis dan dapat digunakan di lain waktu. Tag def digunakan untuk mendefinisikan objek grafis. Untuk menampilkan atau menggunakan objek yang ingin Anda gunakan tag ‹use› dan di dalamnya perlu meneruskan URL definisi.
Perbedaan group dengan definisi adalah, pada pengelompokan objek sudah ditampilkan pada view namun pada definisi hanya ditampilkan jika menggunakan sintaks ‹use›dengan mengacu pada id objek.
Definisi terutama digunakan dalam hal mendefinisikan objek yang dapat digunakan kembali dan untuk membuat gradien. Mari kita lihat beberapa contoh definisi.
Pada contoh di atas, Anda dapat melihat daun grup ditempatkan di bawah bagian definisi (‹defs›). Jadi tidak akan langsung muncul di tampilan. Untuk membuatnya terlihat, harus menggunakan tag ‹use›.
Kegunaan lain dari ‹defs› adalah untuk membuat gradien. Mari kita lihat secara detail cara membuat gradien.
Gradien
Sebuah gambar menjadi sempurna hanya jika warnanya mengesankan. Warna gradasi akan membuat gambar tampil lebih bagus. Mari kita lihat cara membuat warna gradien berbeda menggunakan SVG.
Ada dua jenis gradien yang ada. Gradien Linier dan Gradien Radial
Gradien Linier
Gradien linier digunakan untuk mendefinisikan gradien secara linier. Gradien linier umumnya diplot menggunakan tag ‹linearGradient›. Di dalam tag ‹linearGradient›, ia menggunakan elemen ‹stop› untuk menyebutkan posisi setiap warna gradien. Selain itu, SVG menyediakan sejumlah cara untuk menyesuaikan gradien linier dengan bantuan atribut. Berikut ikuti beberapa atribut yang diperlukan darinya.
gradientTransform:Dengan bantuan atribut ini, ia dapat menerapkan transformasi pada gradien.
x1:x mengoordinasikan titik awal gradien linier.
x2:x koordinat titik akhir gradien linier.
Gradien Radial
Ini digunakan untuk mendefinisikan gradien secara radial. Ini diimplementasikan dengan menggunakan tag ‹radialGradient›. Mirip dengan Linear Gradient, atribut ‹stop› digunakan untuk menentukan warna gradien dan posisinya. Radial Gradient juga mendukung beberapa atribut untuk penyesuaiannya. Berikut ikuti atribut penting darinya.
cx: Mendefinisikan koordinat x lingkaran ujung gradien radial.
cy:Mendefinisikan koordinat y dari lingkaran ujung gradien radial.
fr:Mendefinisikan jari-jari lingkaran awal gradien radial.
fx: Mendefinisikan koordinat x dari lingkaran awal gradien radial.
fy: Mendefinisikan koordinat y dari lingkaran awal gradien radial.
gradientTransform: Atribut ini memberikan transformasi tambahan pada gradien.
Mari kita lihat gradien berfungsi pada SVG dengan beberapa contoh.
Output dari cuplikan kode di atas terlihat seperti berikut.
Sekarang kita telah melihat cara membuat SVG lebih indah di artikel ini. Saya harap Anda memahaminya dengan baik.
