Salah satu kemampuan kuat SVG adalah bahwa ia dapat mengontrol teks ke tingkat yang tidak mungkin untuk halaman HTML standar tanpa perlu menggunakan gambar atau plugin lainnya. Tindakan apa pun yang dapat dilakukan pada bentuk atau jalur (seperti menggambar atau memfilter) dapat dilakukan pada teks. Meskipun rendering teks SVG sangat kuat, masih ada satu kerugian: SVG tidak dapat melakukan pembungkus garis otomatis. Jika teks lebih panjang dari ruang yang diizinkan, cukup potong. Dalam kebanyakan kasus, membuat banyak baris teks membutuhkan beberapa elemen teks.
Selain itu, Anda dapat menggunakan elemen tspan untuk membagi elemen teks menjadi beberapa bagian, memungkinkan setiap bagian memiliki gayanya sendiri.
Juga, dalam elemen teks, pemrosesan spasi mirip dengan HTML: garis istirahat dan pengembalian kereta menjadi spasi, sementara beberapa ruang dikompres menjadi satu ruang.
Teks ditampilkan langsung di gambar - elemen teks Untuk menampilkan teks secara langsung, Anda dapat menggunakan elemen teks, sebagai berikut:<svg>
<rect fill = "merah" />
<lingkaran cx = "150" cy = "100" r = "80" fill = "green" />
<Text x = "150" y = "125" font-size = "60" Text-anchor = "Middle" Fill = "White"> SVG </text>
</svg>
Seperti yang ditunjukkan pada contoh di atas, elemen teks dapat mengatur properti berikut:
x, y adalah koordinat posisi teks. Teks-jangkar adalah arah tampilan teks, yang sebenarnya merupakan posisi (x, y) pada posisi teks. Properti ini memiliki tiga nilai: mulai, tengah dan akhir. Mulai berarti koordinat posisi teks (x, y) terletak di awal teks, dan teks ditampilkan satu per satu di sebelah kanan mulai dari titik ini. Berarti tengah (x, y) terletak di tengah teks, dan teks ditampilkan di arah kiri dan kanan, yang sebenarnya terpusat. Akhir berarti bahwa titik (x, y) berada di akhir teks, dan teks ditampilkan satu per satu di sebelah kiri.Selain sifat -sifat ini, sifat -sifat berikut dapat ditentukan dalam CSS atau langsung di properti:
Isi, Stroke: Isi dan warna stroke, penggunaan spesifik dirangkum nanti. Atribut terkait font: font-family, font-style, font-berat, font-varian, font-stretch, font-size, font-size-adjust, kerning, spacing letter, spasi-kata dan dekorasi teks. Interval Teks - Elemen Tspan Elemen ini adalah pelengkap yang kuat untuk elemen teks; Ini digunakan untuk membuat teks dalam interval; Ini hanya dapat muncul di elemen teks atau elemen anak dari elemen tspan. Penggunaan yang khas adalah menekankan menampilkan bagian teks. Misalnya:<text>
<tspan font-weight = "bold" fill = "red"> Ini tebal dan merah </span>
</text>
Elemen TSPAN memiliki properti berikut yang dapat diatur: x, y digunakan untuk mengatur nilai koordinat absolut dari teks yang terkandung, yang akan mengganti posisi teks default. Properti ini dapat berisi serangkaian angka yang diterapkan untuk setiap karakter tunggal yang sesuai. Karakter yang tidak memiliki pengaturan yang sesuai akan mengikuti karakter sebelumnya. Misalnya:
<Text x = "10" y = "10"> Halo dunia!
<tspan x = "100 200 300" font-weight = "bold" fill = "red"> Ini tebal dan merah </span>
</text>
DX, DY digunakan untuk mengatur offset teks yang terkandung relatif terhadap posisi teks default. Properti ini juga dapat berisi serangkaian angka, masing -masing diterapkan pada karakter yang sesuai. Karakter yang tidak memiliki pengaturan yang sesuai akan mengikuti karakter sebelumnya. Anda dapat mengubah X dari contoh di atas ke DX untuk melihat efeknya. Rotate digunakan untuk mengatur sudut rotasi font. Halaman properti ini dapat berisi serangkaian angka yang diterapkan untuk setiap karakter. Karakter yang tidak memiliki pengaturan yang sesuai akan menggunakan set angka terakhir.
<Text x = "10" y = "10"> Halo dunia!
<tspan rotate = "10 20 45" font-weight = "bold" fill = "red"> Ini tebal dan merah </span>
</text>
TextLength: Ini adalah properti yang paling membingungkan. Dikatakan bahwa setelah mengaturnya, ketika rendering menemukan bahwa panjang teks tidak konsisten dengan nilai ini, panjang ini akan menjadi dasar. Tapi saya tidak mencobanya. Kutipan Teks - Elemen Tref
Elemen ini memungkinkan referensi ke teks yang ditentukan dan secara efisien menyalinnya ke lokasi saat ini, biasanya dengan XLINK: HREF elemen target yang ditentukan. Karena disalin, saat menggunakan CSS untuk memodifikasi teks saat ini, teks asli tidak akan dimodifikasi. Lihat contoh:
<Text ID = "Contoh"> Ini adalah contoh teks. </teks>
<text>
<tref xlink: href = "#contoh" />
</text>
Jalur Teks - Elemen TextPath Ini lebih menarik, efeknya juga keren, dan dapat menghasilkan banyak efek artistik; Elemen ini mengambil jalur yang ditentukan dari atribut xlink: href dan menyelaraskan teks di jalur ini, lihat contohnya:<path id = "my_path" d = "m 20,20 c 40,40 80,40 100,20" />
<text>
<textpath xlink: href = "#my_path"> Teks ini mengikuti kurva. </textpath>
</text>
Rendering Image di SVG - Elemen Gambar Elemen gambar dalam SVG dapat secara langsung mendukung menampilkan gambar raster, yang sangat mudah digunakan. Lihat contoh berikut:<svg>
<gambar xlink: href = "penguins.jpg" x = "0" y = "0"/>
</svg>
Beberapa poin yang perlu diperhatikan di sini :1. Jika koordinat x atau y tidak diatur, standarnya adalah 0.
2. Jika lebar atau tinggi tidak diatur, standarnya adalah 0.
3. Jika lebar atau tinggi secara eksplisit diatur ke 0, rendering gambar ini akan dilarang.
4. Format gambar mendukung PNG, JPEG, JPG, SVG, dll., SVG mendukung SVG bersarang.
5.Image adalah elemen reguler SVG, seperti elemen lainnya, sehingga mendukung semua efek seperti pemangkasan, masking, penyaringan, rotasi, dll.
Referensi Praktis:Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Pusat Pengembangan: https://developer.mozilla.org/en/svg
Referensi Populer: http://www.chinasvg.com/
Dokumen Resmi: http://www.w3.org/tr/svg11/