Bekerja dengan Teks dalam Scalable Vector Graphics (SVG)
Dalam posting kami sebelumnya, kami telah menggunakan SVG untuk membuat bentuk. Dalam posting ini, seperti judulnya, kita akan melihat membuat Teks dengan SVG. Ada banyak hal yang dapat kita lakukan dengan teks di luar apa yang dapat dilakukan oleh teks HTML biasa.
Jadi, mari kita periksa.
Implementasi Dasar
Tapi, sebelum kita melangkah lebih jauh, mari kita lihat caranya Teks dalam SVG terbentuk pada tingkat yang paling mendasar:
Teks dalam SVG, seperti yang Anda lihat dari cuplikan kode di atas, didefinisikan dengan tag yang cukup logis, x dan y atribut untuk menentukan koordinat garis dasar.
Sumber gambar: Wikipedia.org
Dan inilah bagaimana teks akan terlihat. Untuk saat ini sepertinya tidak ada bedanya dengan teks biasa dalam HTML.
Gaya Teks Dasar
Teks juga dapat ditata dengan properti CSS seperti font-berat, gaya tulisan, dan dekorasi teks yang dapat diimplementasikan baik melalui inline-style, internal-style atau gaya eksternal seperti yang telah kita bahas di posting sebelumnya tentang Styling SVG dengan CSS. Berikut ini beberapa contohnya.
Berani
Ini adalah teks dalam Scalable Vector Graphic (SVG)
Miring
Ini adalah teks miring dalam Scalable Vector Graphic (SVG)
Menggarisbawahi
Ini adalah teks yang digarisbawahi dalam Scalable Vector Graphic (SVG)
Elemen
Dalam beberapa kasus, ketika kita hanya ingin menerapkan gaya atau atribut ke bagian tertentu dari Teks, kita dapat menggunakannya
Ini berani ,ini miring danini menggarisbawahi
Mode Penulisan
Teks tidak hanya ditulis dari kiri ke kanan. Di bagian lain dunia, Jepang misalnya, teksnya ditulis atas ke bawah. Di SVG, ini bisa dilakukan dengan menggunakan mode penulisan atribut.
ぁ ぃ ぅ ぇ ぉ か き
Dalam contoh di atas, kami telah menempatkan beberapa karakter Jepang acak (jangan tanya artinya, saya benar-benar tidak tahu) dan mengubah orientasi dengan deklarasi gaya ini, mode penulisan: tb, dimana tb berdiri untuk atas ke bawah.
Garis Besar Teks
Teks dalam SVG pada dasarnya adalah grafik, jadi kita juga bisa menerapkan pukulan atribut untuk menambahkan garis perbatasan ke Teks seperti yang kami lakukan dengan bentuk lainnya.
Dalam cuplikan kode di atas, kami telah menambahkan pukulan atribut ke mengisi atribut untuk tidak ada yang akan menghasilkan presentasi teks berikut.
Jalur Teks
Dalam SVG, Teks tidak hanya dapat ditampilkan secara horizontal dan vertikal, tetapi juga bisa ikuti pola Path. Inilah cara melakukannya.
Pertama, kita perlu mendefinisikan jalan. Namun, membuat Path secara langsung dalam HTML tidaklah intuitif, kita perlu memahami koordinat dan beberapa perintah yang saya yakin sebagian besar dari kita akan coba hindari. Jadi, untuk membuat langkah ini lebih sederhana, saya pribadi menyarankan untuk hanya membuka editor vektor (Inkscape atau Illustrator), buat jalur, dan hasilkan kode SVG.
Lalu, letakkan def di sini berarti definisi.
Perhatikan bahwa kami juga telah menambahkan id atribut ke id ke teks kami dengan
Lorem ipsum dolor sit amet consectetur.
Bacaan lebih lanjut: Jalan SVG
Gradien Teks
Menambahkan latar untuk mengisi Teks juga memungkinkan di SVG, dan jika Anda telah berhasil di bagian Jalur Teks di atas, ini akan jauh lebih mudah.
Pertama, kita perlu mendefinisikan warna gradien.
Ketika semua definisi yang diperlukan sudah diatur, sekarang kita hanya perlu menambahkan teks dan merujuk mengisi atribut ke gradien id atribut, sebagai berikut;
Gradien
Dan ini dia, teks dengan gradien.
Bacaan lebih lanjut: Gradien dan Pola SVG
Referensi Lebih Lanjut
Teks dalam SVG tidak diragukan lagi kuat, sebenarnya ada banyak hal yang dapat kita lakukan di luar apa yang bisa kita akomodasikan dalam posting ini. Jadi, di bawah ini kami telah mengumpulkan beberapa referensi lagi untuk melayani minat Anda dalam hal ini.
- Tentang Font di SVG - Divya Manian
- Dokumentasi Resmi Teks SVG - W3.org
- SVG Dovumentation di Mozilla Dev. Jaringan dengan Contoh dan Alat - MDN
- Atribut Mode Penulisan SVG - MDN
- Lihat Demo
- Sumber Unduhan
