HTML5 SVG 2D PENDAHULUAN 9 - PENDAHULUAN DAN APLIKASI Topeng dan Elemen Topeng

SVG mendukung berbagai efek topeng. Menggunakan fitur -fitur ini, kami dapat membuat banyak efek yang mempesona. Adapun apakah topeng disebut topeng atau topeng dalam bahasa Cina, itu tidak dibedakan. Itu disebut topeng di sini.

Jenis topeng yang didukung oleh SVG:

1. Jalur kliping

Jalur kliping adalah grafik yang terdiri dari jalur, teks atau grafik dasar. Semua grafik di dalam jalur klip terlihat, dan semua grafik di luar jalur klip tidak terlihat.

2. Topeng/Topeng

Topeng adalah wadah yang mendefinisikan satu set grafik dan menggunakannya sebagai media tembus cahaya yang dapat digunakan untuk menggabungkan objek dan latar belakang latar depan.

Perbedaan penting antara jalur kliping dan topeng lainnya adalah bahwa jalur kliping adalah topeng 1-bit, yang berarti bahwa objek yang ditutupi oleh jalur kliping baik sepenuhnya transparan (terlihat, terletak di dalam jalur kliping) atau sepenuhnya tidak jelas (tidak terlihat, terletak di luar jalur kliping). Dan topeng dapat menentukan transparansi di lokasi yang berbeda.

Atribut overflow dan atribut klip dari elemen HTML bersama -sama mengatur perilaku kliping elemen ke konten. Demikian pula, di SVG, 2 properti ini juga dapat digunakan.

Atribut overflow mendefinisikan perilaku yang diambil ketika konten suatu elemen melebihi perbatasan elemen.

Properti ini dapat digunakan untuk elemen (SVG, simbol, gambar, objek asing), elemen pola dan penanda yang dapat membuat jendela baru. Nilai properti ini adalah sebagai berikut:

Terlihat: Menampilkan semua konten, bahkan jika konten sudah di luar perbatasan elemen, ini adalah nilai default.

Tersembunyi: Sembunyikan konten di luar jalur kliping. Jalur klip ditentukan oleh properti klip.

Gulir: Dalam bentuk bilah gulir, menyajikan konten di luarnya.

Otomatis: Menggunakan perilaku yang ditentukan oleh browser, ini tampaknya tidak dapat diandalkan.

Properti ini pada dasarnya sama dengan properti dengan nama yang sama di CSS2, kecuali bahwa di SVG, ada beberapa prosedur pemrosesan yang berbeda:

1. Atribut overflow tidak berpengaruh pada elemen selain elemen yang membuat jendela baru (SVG, Simbol, Gambar, Luar Negeri), elemen pola dan penanda.

2. Jalur kliping sesuai dengan jendela. Jika jendela baru dibuat, jalur kliping baru dibuat. Jalur kliping default adalah batas jendela.

Properti klip digunakan untuk mengatur jalur klip jendela saat ini.

Properti ini dapat digunakan untuk elemen (SVG, simbol, gambar, objek asing), elemen pola dan penanda yang dapat membuat jendela baru. Properti ini memiliki parameter yang sama dengan properti dengan nama yang sama di CSS2. Otomatis berarti bahwa jalur kliping konsisten dengan perbatasan jendela. Saat menggunakan grafik sebagai parameter (mengatur nilai atas, kanan, bawah, dan kiri dari persegi panjang tanaman), nilai koordinat pengguna (mis. Koordinat tanpa unit) dapat digunakan. Misalnya:

P {clip: rect (5px, 10px, 10px, 5px); }

Catatan di sini bahwa secara default (overflow dan clip keduanya nilai default), jalur klip konsisten dengan batas jendela. Setelah mengatur ViewBox dan PreserveasPectratio, Anda biasanya perlu memetakan keempat sisi jalur klip ke empat sisi kotak view untuk memastikan bahwa beberapa efek tampilan adalah sama (tentu saja, jika semuanya adalah nilai default, Anda tidak perlu mengaturnya).

Jalur klip didefinisikan menggunakan elemen Clippath dan kemudian dirujuk menggunakan atribut jalur-klip.

Clippath dapat berisi elemen jalur, elemen teks, elemen grafik dasar (lingkaran, dll.) Dan menggunakan elemen. Jika itu adalah elemen penggunaan, ia harus secara langsung merujuk ke jalur, teks atau elemen grafik dasar, dan elemen lain tidak dapat dirujuk.

Perhatikan bahwa jalur kliping hanyalah lapisan topeng satu bit, yang merupakan penyatuan semua elemen yang terkandung. Objek dalam koleksi ini dapat ditampilkan, dan objek yang tidak dalam kisaran ini tidak akan ditampilkan. Algoritma dengan titik penilaian spesifik tidak dalam kisaran ditentukan oleh atribut aturan klip.

Untuk objek grafis, jalur klip sama dengan penyatuan jalur klip yang diatur dengan sendirinya dengan jalur klip dari semua elemen luar (termasuk jalur klip yang ditetapkan oleh clip-path dan overflow). Beberapa poin yang perlu diperhatikan:

1. Elemen Clippath itu sendiri tidak mewarisi jalur klip yang ditentukan Clippath dari simpul luar.

2. Elemen Clippath itu sendiri dapat mengatur atribut jalur klip. Efeknya adalah persimpangan dua jalur.

3. Atribut jalur klip dapat ditetapkan untuk elemen anak dari elemen Clippath: efeknya adalah penyatuan dua jalur.

4. Jalur kliping kosong akan memotong semua konten dalam elemen.

Berikut adalah beberapa atribut penting:

Atribut ini mendefinisikan sistem koordinat yang digunakan oleh elemen Clippath. Kami terbiasa dengan kedua nilai ini, yaitu sistem koordinat pengguna yang menggunakan elemen yang merujuk jalur klip saat ini dan nilai proporsional kotak pembatas.

Elemen Clippath tidak pernah diterjemahkan secara langsung, dan dirujuk melalui jalan-jalan, jadi mengatur atribut tampilan dari elemen Clippath tidak berpengaruh.

Tak perlu dikatakan, atribut ini digunakan untuk merujuk ke jalur kliping. Perlu dicatat di sini bahwa semua elemen kontainer, elemen grafik dasar dan elemen Clippath dapat menggunakan atribut ini.

Properti ini digunakan untuk menentukan titik mana yang termasuk titik -titik di dalam kekuatan kliping. Ini mudah untuk menilai grafik tertutup sederhana, tetapi untuk grafik kompleks dengan lubang di dalamnya, ada perbedaan. Nilai properti ini memiliki arti yang sama dengan nilai aturan pengisian:

nol: algoritma yang digunakan untuk nilai ini adalah untuk memancarkan garis dari titik untuk dinilai ke arah mana pun, dan kemudian menghitung arah titik persimpangan antara gambar dan segmen garis; Hasil perhitungan dimulai dari 0, dan setiap segmen garis di persimpangan berasal dari kiri ke kanan, tambahkan 1; Setiap segmen garis di persimpangan berasal dari kanan ke kiri, kurangi 1; Setelah menghitung semua titik persimpangan dengan cara ini, jika hasil perhitungan ini tidak sama dengan 0, titik tersebut ada pada gambar dan perlu diisi; Jika nilainya sama dengan 0, tidak perlu diisi di luar gambar. Lihat contoh berikut:

EvenOdd: Algoritma yang digunakan untuk nilai ini adalah memancarkan garis dari titik yang perlu dinilai ke arah mana pun, dan kemudian menghitung jumlah titik di mana gambar dan persimpangan segmen garis. Jika angkanya aneh, intinya diubah menjadi gambar dan perlu diisi; Jika angkanya bahkan, intinya berada di luar gambar dan tidak perlu diisi. Lihat contoh pada gambar di bawah ini:

Atribut clip-aturan hanya dapat digunakan untuk elemen grafis internal dari elemen Clippath. Misalnya, pengaturan berikut berfungsi:

<g>

<clippath id = "myclip">

<path d = "..." clip-aturan = "evenodd" />

</lippath>

<rect clip-path = "url (#myclip)" ... />

</g>

Itu tidak berhasil jika elemen tidak ada di Clippath. Misalnya, pengaturan berikut tidak berfungsi:

<g clip-aturan = "nol">

<clippath id = "myclip">

<path d = "..." />

</lippath>

<rect clip-path = "url (#myclip)" clip-rule = "evenodd" ... />

</g>

Akhirnya, mari kita lihat contoh kecil jalur kliping:

<svg>

<g>

<clippath id = "myclip">

<path d = "m 10,10 l 10,20 l 20,20 l 20,10 z"-rule = "evenodd" />

</lippath>

</g>

<rect clip-path = "url (#myclip)" x = "10" y = "10" fill = "red" />

</svg>

Hanya area sudut kiri atas persegi panjang yang terlihat.

Di SVG, Anda dapat menetapkan elemen grafis atau elemen G sebagai topeng ke objek yang diberikan untuk menggabungkan objek yang diberikan ke latar belakang.

Topeng ditentukan oleh elemen topeng. Saat menggunakan topeng, Anda hanya perlu merujuk topeng di atribut topeng objek.

Elemen mask dapat berisi elemen grafis dan elemen wadah (misalnya G).

Bahkan, semua orang jelas tentang efek topeng. Pada dasarnya, ini adalah untuk menghitung transparansi akhir berdasarkan warna dan transparansi setiap titik dalam topeng. Kemudian ketika merender objek, lapisan topeng dengan transparansi yang berbeda tercakup pada objek, yang mencerminkan efek masking topeng. Untuk membuat benda -benda, hanya bagian -bagian di dalam topeng yang akan diberikan sesuai dengan transparansi titik pada topeng, dan bagian -bagian di luar topeng tidak akan ditampilkan. Lihat contoh berikut:

<svg viewbox = "0 0 800 300" versi = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<defs>

<lineargradient id = "gradient" gradientunits = "UsersPaceOnuse"

x1 = "0" y1 = "0" x2 = "800" y2 = "0">

<stop offset = "0" stop-color = "white" stop-opacity = "0" />

<stop offset = "1" stop-color = "white" stop-opacity = "1" />

</lineargradient>

<mask id = "mask" maskunits = "UsersPaceOnuse"

x = "0" y = "0">

<rect x = "0" y = "0" fill = "url (#gradient)" />

</scask>

<Text id = "Text" x = "400" y = "200"

font-family = "verdana" font-size = "100" text-anchor = "middle">

Teks bertopeng

</text>

</efs>

<!-Latar belakang jendela->

<rect x = "0" y = "0" fill = "#ff8080" />

<!- ​​Langkah pertama adalah menggambar teks dengan topeng, dan Anda dapat melihat bahwa efek transparansi topeng telah diterapkan pada kata-kata.

Langkah kedua adalah menggambar teks tanpa topeng sebagai garis besar teks pada langkah pertama ->

<gunakan xlink: href = "#text" fill = "blue" mask = "url (#mask)" />

<gunakan xlink: href = "#text" fill = "none" stroke = "hitam" stroke-lebar = "2" />

</svg>

Efeknya ditunjukkan pada gambar di bawah ini:

Anda dapat mencoba mengubah lebar elemen rect pada elemen topeng di atas menjadi 500. Anda akan melihat bahwa bagian teks tidak ditampilkan, karena bagian itu telah melebihi ruang lingkup topeng. Seperti yang benar -benar dapat Anda lihat di sini, jalur kliping di atas hanyalah topeng khusus (transparansi setiap titik adalah 0 atau 1).

Definisi dan penggunaan topeng telah diperkenalkan. Mari kita lihat beberapa atribut penting:

Sistem koordinat yang mendefinisikan koordinat (x, y) dan panjang (lebar, tinggi) dalam elemen topeng: sistem koordinat pengguna yang mengacu pada elemen topeng, atau nilai relatif dari kotak pembatas relatif terhadap elemen topeng yang dirujuk. Arti dari nilai ini sama dengan makna unit di bab sebelumnya.

Mendefinisikan sistem koordinat elemen anak dalam elemen topeng.

Posisi dan ukuran topeng didefinisikan. Di bawah koordinat ObjectBoundingBox default, nilai default adalah -10%, -10%, 120%, dan 120%.

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/