Pengenalan kepada SVG 2D dalam HTML5 3—Pengenalan kepada teks, imej dan kemahiran tutorial text_html5 pemaparan

Memaparkan teks dalam SVG

Salah satu keupayaan hebat SVG ialah ia boleh mengawal teks pada tahap yang tidak mungkin dengan halaman HTML standard, tanpa menggunakan imej atau pemalam lain. Sebarang operasi yang boleh dilakukan pada bentuk atau laluan (seperti mengecat atau menapis) boleh dilakukan pada teks. Walaupun pemaparan teks SVG sangat berkuasa, masih terdapat satu kelemahan: SVG tidak boleh melakukan pembungkusan perkataan automatik. Jika teks lebih panjang daripada ruang yang dibenarkan, potong sahaja. Dalam kebanyakan kes, mencipta teks berbilang baris memerlukan berbilang elemen teks.
Selain itu, anda boleh menggunakan elemen tspan untuk membahagikan elemen teks kepada beberapa bahagian, membolehkan setiap bahagian mempunyai gaya tersendiri.

Selain itu, dalam elemen teks, ruang dilayan sama seperti HTML: suapan baris dan pemulangan pengangkutan menjadi ruang dan berbilang ruang dimampatkan ke dalam satu ruang.

Teks dipaparkan terus dalam imej - elemen teks
Untuk memaparkan teks secara langsung, anda boleh menggunakan elemen teks adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

SVG

Seperti yang ditunjukkan dalam contoh di atas, Elemen teks boleh menetapkan atribut berikut: x,y ialah koordinat kedudukan teks. sauh teks ialah arah paparan teks, yang sebenarnya adalah kedudukan (x, y) teks. Atribut ini mempunyai tiga nilai: mula, tengah dan akhir. mula bermakna koordinat kedudukan teks (x, y) berada pada permulaan teks, dan teks dipaparkan satu demi satu ke kanan bermula dari titik ini. Tengah bermaksud bahawa (x, y) terletak di tengah-tengah teks, dan teks dipaparkan dalam kedua-dua arah, yang sebenarnya berpusat. hujung bermaksud titik (x, y) berada di hujung teks dan teks dipaparkan satu persatu ke kiri.

Selain atribut ini, atribut berikut boleh ditentukan dalam CSS atau secara langsung dalam atribut:

isi, sapuan: isi dan sapuan warna, penggunaan khusus akan diringkaskan kemudian. Atribut fon yang berkaitan: keluarga fon, gaya fon, berat fon, varian fon, regangan fon, saiz fon, laras saiz fon, kerning, jarak huruf, jarak perkataan dan hiasan teks.

Julat teks - elemen tspan
Elemen ini merupakan tambahan yang kuat kepada elemen teks; elemen dalam elemen kanak-kanak. Penggunaan biasa adalah untuk menyerlahkan sebahagian daripada teks. Contohnya:

Salin kod

Kodnya adalah seperti berikut:

Ini adalah tebal dan merah

Elemen tspan mempunyai atribut berikut: x, y digunakan untuk menetapkan koordinat mutlak teks yang disertakan. Sifat ini boleh mengandungi urutan nombor yang digunakan pada setiap aksara tunggal yang sepadan. Watak tanpa tetapan yang sepadan akan serta-merta mengikuti watak sebelumnya. Contohnya:

Salin kod

Kod adalah seperti berikut:

Hello World!
Ini adalah tebal dan merah> ;

dx,dy digunakan untuk menetapkan offset teks yang disertakan berbanding dengan kedudukan teks lalai. Sifat ini juga boleh mengandungi satu siri nombor, setiap satu daripadanya akan digunakan pada aksara yang sepadan. Watak tanpa tetapan yang sepadan akan serta-merta mengikuti watak sebelumnya. Anda boleh menggantikan x dalam contoh di atas dengan dx untuk melihat kesannya. rotate digunakan untuk menetapkan sudut putaran fon. Halaman sifat ini boleh mengandungi satu siri nombor yang digunakan untuk setiap aksara. Aksara tanpa tetapan yang sepadan akan menggunakan set nombor terakhir.

Salin kod

Kodnya adalah seperti berikut:

Hello World!
Ini adalah tebal dan merah

textLength: Ini adalah atribut yang paling membingungkan Dikatakan bahawa selepas penetapan, jika pemaparan mendapati bahawa panjang teks tidak konsisten dengan nilai ini, panjang ini akan digunakan. Tetapi saya tidak mencubanya.

Rujukan teks - elemen tref
Elemen ini membenarkan untuk merujuk teks yang ditentukan dan menyalinnya dengan cekap ke lokasi semasa, biasanya bersama-sama dengan xlink:href untuk menentukan elemen destinasi. Kerana ia disalin, apabila anda menggunakan css untuk mengubah suai teks semasa, teks asal tidak akan diubah suai. Lihat contoh:

Salin kod

Kodnya adalah seperti berikut:

Ini ialah teks contoh.

Text Path - elemen textPath
Ini lebih menarik, kesannya juga hebat, dan boleh mencipta banyak kesan artistik; daripada atribut xlink:hrefnya Dan selaraskan teks ke laluan ini, lihat contoh:

Salin kod

Kod adalah seperti berikut:

Teks ini mengikut lengkung.

Merender gambar dalam SVG - elemen imej
SVG Elemen imej dalam boleh terus menyokong paparan imej raster dan sangat mudah untuk digunakan. Lihat contoh di bawah:

Salin kod

Kodnya adalah seperti berikut:

Beberapa perkara untuk diperhatikan di sini:
1. Jika koordinat x atau y tidak ditetapkan, lalai ialah 0.

2 Jika lebar atau tinggi tidak ditetapkan, lalai juga ialah 0.

3 Jika lebar atau tinggi ditetapkan secara jelas kepada 0, pemaparan imej ini akan dilarang.

4. Format imej menyokong png, jpeg, jpg, svg, dll., jadi svg menyokong svg bersarang.

5.imej, seperti elemen lain, ialah elemen biasa svg, jadi ia menyokong semua pemangkasan, pelekat, penapis, putaran dan kesan lain.

Rujukan praktikal:
Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx
Pusat Pembangunan: https://developer.mozilla.org/en/SVG
Rujukan Popular: http://www.chinasvg.com/
Dokumentasi rasmi: http://www.w3.org/TR/SVG11/