Bekerja dengan Teks dalam Grafik Vektor Berkala (SVG)

Dalam siaran terdahulu, kami telah menggunakan SVG untuk membuat bentuk. Dalam siaran ini, sebagai tajuk berkata, kita akan melihat mewujudkan Teks dengan SVG. Terdapat banyak perkara yang boleh kita lakukan dengan teks melangkaui teks HTML biasa yang mampu dilakukan.

Jadi, mari kita periksa mereka.

Pelaksanaan Asas

Tetapi, sebelum kita pergi lebih jauh, mari kita lihat bagaimana Teks dalam SVG dibentuk pada tahap yang sangat asas:

Teks dalam SVG, seperti yang anda dapat lihat dari coretan kod di atas, ditakrifkan dengan tag cukup logik, . Elemen ini pada dasarnya hanya memerlukan x dan y atribut untuk menentukan koordinat garis dasar.

Sumber imej: Wikipedia.org

Dan inilah caranya akan kelihatan seperti teks. Buat masa ini nampaknya tidak ada perbezaan dengan teks biasa dalam HTML.

Gaya Teks Asas

Teks juga boleh digayakan dengan sifat CSS seperti berat badan, gaya fon, dan teks-dekorasi yang boleh dilaksanakan sama ada melalui gaya-gaya, gaya dalaman atau gaya luaran seperti yang telah dibincangkan dalam jawatan terdahulu mengenai Styling SVG dengan CSS. Berikut adalah beberapa contoh.

Bold

 Ini adalah teks dalam Scalable Vector Graphic (SVG)

Italic

 Ini adalah teks italik dalam Scalable Vector Graphic (SVG)

Garis bawah

 Ini adalah teks yang digariskan dalam Grafik Vektor Scalable (SVG)

Elemen

Dalam sesetengah kes, apabila kita hanya mahu menggunakan gaya atau atribut untuk sebahagian Teks tertentu, kita boleh menggunakannya . Contoh di bawah menunjukkan cara kami menambah berani, italik dan garis bawah kepada satu baris teks.

 Ini berani, ini italik dan ini adalah garis bawah

Mod Penulisan

Teks bukan sahaja ditulis dari kiri ke kanan. Di bahagian lain di dunia, Jepun misalnya, teks ditulis dari dari atas ke bawah. Di SVG, ini boleh dilakukan dengan menggunakan menulis-mod atribut.

 ぁ ぃ ぅ ぇ ぉ か き

Dalam contoh di atas, kami telah meletakkan beberapa aksara Jepun rawak (jangan tanya saya maksudnya, saya tidak tahu) dan mengubah orientasi dengan perisytiharan gaya ini, menulis-mod: tb, di mana tb adalah berdiri untuk dari atas ke bawah.

Garis Teks Teks

Teks dalam SVG pada dasarnya adalah grafik, jadi kami juga boleh memohon strok atribut untuk menambah garis sempadan pada Teks seperti yang kita lakukan dengan bentuk lain.

Dalam coretan kod di atas, kami telah menambah strok atribut kepada elemen dan keluarkan warna teks dengan menyatakan mengisi atribut kepada tiada yang akan menghasilkan pembentangan teks berikut.

Laluan Teks

Dalam SVG, Teks tidak hanya dapat dipaparkan secara mendatar dan menegak, tetapi juga dapat ikuti corak Laluan. Inilah cara untuk melakukannya.

Pertama, kita perlu menentukan Jalan itu. Walau bagaimanapun, mewujudkan Laluan secara langsung dalam HTML bukanlah intuitif, kita perlu memahami koordinat dan beberapa arahan yang saya pasti kebanyakan kita akan cuba mengelak. Jadi, untuk membuat langkah ini lebih mudah, saya secara peribadi mencadangkan untuk membuka editor vektor (Inkscape atau Illustrator), membuat laluan, dan menghasilkan kod SVG.

Kemudian, letakkan elemen di dalam a elemen. defs di sini bermakna definisi.

Perhatikan bahawa kami juga telah menambah ID atribut kepada . Sekarang, kita hanya perlu menghubungkan Path ID kepada teks kami dengan elemen, seperti itu;

    Lorem ipsum dolor sit consetetur amet.

Bacaan lanjut: Laluan SVG

Kecerunan Teks

Menambah latar belakang untuk mengisi Teks juga mungkin dalam SVG, dan jika anda telah berjaya di bahagian Teks Teks di atas, ini akan lebih mudah.

Pertama, kita perlu menentukan warna kecerunan.

Apabila semua definisi yang diperlukan disediakan, sekarang kita hanya perlu menambah teks dan merujuknya mengisi atribut ke kecerunan itu ID atribut, seperti berikut;

 Kecerunan

Dan di sini, teks yang mempunyai kecerunan.

Bacaan lanjut: Sederhana dan SVG SVG

Rujukan lanjut

Teks dalam SVG sudah pasti kuat, sebenarnya ada banyak perkara yang dapat kita lakukan di luar apa yang kita dapat menampung dalam jawatan ini. Oleh itu, di bawah ini kami telah mengumpulkan lebih banyak rujukan untuk mengabadikan minat anda dalam subjek ini.

Mengenai Font dalam SVG - Divya Manian
Dokumentasi Rasmi Teks SVG - W3.org
Dovumentation SVG di Dev Mozilla. Rangkaian dengan Contoh dan Alat - MDN
Atribut Mod Penulisan SVG - MDN

Lihat Demo
Muat turun Sumber