HTML5 SVG 2D Pengenalan 7—Guna Semula dan Rujukan kemahiran tutorial SVG Elements_html5

Kami memperkenalkan banyak elemen grafik sebelum ini Jika banyak grafik itu sendiri adalah sama, adakah kita perlu menentukan yang baru setiap kali? Bolehkah kita berkongsi beberapa grafik? Ini adalah fokus bahagian ini - penggunaan semula elemen SVG.

Elemen gabungan-g
Elemen g ialah bekas yang menggabungkan sekumpulan elemen grafik yang berkaitan menjadi satu keseluruhan dengan cara ini, kita boleh beroperasi pada keseluruhan ini. Elemen ini biasanya boleh digunakan bersama-sama dengan elemen desc dan tajuk untuk memberikan maklumat struktur tentang dokumen. Dokumen yang tersusun dengan baik secara amnya boleh dibaca dan dipaparkan dengan cekap. Lihat contoh kecil:

Salin kod

Kodnya adalah seperti berikut:

versi="1.1"width="5cm"height="5cm">
Dua kumpulan, setiap dua segi empat tepat< ;/desc>
🎜>
>



width="4.98cm "height="4.98cm"
fill="none"stroke="blue" stroke-width=".02cm"/>


Perhatikan beberapa perkara
:
1.xmlns="http://www.w3.org/2000/svg" menunjukkan bahawa ruang nama lalai bagi keseluruhan elemen svg ialah svg. Ini boleh diketepikan apabila tidak ada kekaburan. Memandangkan dokumen svg ialah dokumen XML, peraturan ruang nama XML yang berkaitan boleh digunakan di sini. Sebagai contoh, anda boleh menentukan ruang nama untuk paparan svg, menyediakan alias untuk ruang nama, dsb.
Elemen 2.g boleh bersarang.

3. Elemen grafik gabungan boleh diberikan nilai id sama seperti satu elemen Dengan cara ini, apabila diperlukan (seperti animasi dan penggunaan semula sekumpulan elemen), anda hanya perlu merujuk nilai id ini.
4. Menggabungkan kumpulan elemen grafik boleh menetapkan atribut berkaitan kumpulan elemen ini (isi, lejang, transformasi, dll.) Ini juga merupakan senario di mana gabungan digunakan.
Elemen templat-simbol

elemen simbol digunakan untuk mentakrifkan templat grafik (templat boleh mengandungi banyak grafik templat ini boleh dijadikan contoh oleh elemen penggunaan). Fungsi templat sangat serupa dengan elemen g Kedua-duanya menyediakan satu set objek grafik, tetapi terdapat beberapa perbezaan. Perbezaan daripada elemen g ialah:
1. Elemen simbol itu sendiri tidak akan dipaparkan, hanya contoh templat simbol akan dipaparkan.
2. Elemen simbol boleh mempunyai atribut viewBox dan preserveAspectRatio, yang membolehkan simbol menskalakan elemen grafik.
Dari perspektif pemaparan, elemen yang serupa dengan elemen simbol ialah elemen penanda (menentukan anak panah dan label) dan elemen corak (menentukan warna); Atas sebab ini, atribut 'paparan' tidak bermakna untuk simbol. Kod yang diubah suai berikut menunjukkan cara menggunakan simbol:





Salin kod

Kod adalah seperti berikut:

xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"width="5cm"height="5cm">

Dua kumpulan,echoftworectangles

< usexlink :href="#group1"target="_blank"rel="nofollow">
fill="none"stroke="blue"stroke-width=".02cm"/>
>

elemen define-defs
SVG membolehkan anda mentakrifkan set objek dan kemudian menggunakan semula set objek ini (nota, bukan hanya objek grafik). Contoh yang paling biasa adalah untuk menentukan warna kecerunan dan kemudian menetapkannya kepada atribut isian dalam objek grafik lain. Warna kecerunan tidak diberikan apabila ditakrifkan, jadi objek jenis ini boleh diletakkan di mana-mana sahaja. Penggunaan semula selalunya wujud dalam objek grafik, dan kami tidak mahu membuat secara langsung semasa mentakrifkan, tetapi ingin membuat di tempat yang dirujuk Ini boleh dicapai menggunakan elemen defs.

Secara amnya, pendekatan yang disyorkan ialah meletakkan objek yang dirujuk dalam elemen defs apabila boleh. Objek ini biasanya: altGlyphDef, clipPath, kursor, penapis, penanda, topeng, corak, LinearGradient, radialGradient, simbol dan objek grafik, dsb. Mentakrifkan objek ini dalam elemen defs menjadikannya lebih mudah difahami, sekali gus meningkatkan kebolehcapaian.

Sebenarnya, elemen g, elemen simbol dan elemen defs sebagai objek kontena semuanya menyediakan fungsi guna semula pada tahap yang berbeza-beza, tetapi ciri setiap elemen mungkin berbeza sedikit: contohnya, elemen g dipaparkan secara langsung , simbol dan def tidak akan dipaparkan secara langsung Simbol mengandungi atribut kotak pandangan dan tetingkap paparan baharu akan dibuat.

Biasanya atribut id diperuntukkan kepada elemen yang ditakrifkan dalam defs dan digunakan terus di mana digunakan. Bergantung pada elemen, takrifan ini boleh digunakan di tempat yang berbeza Contohnya, warna progresif berikut digunakan sebagai atribut:

Salin kod

Kodnya adalah seperti berikut:

xmlns="http://www.w3.org/2000 /svg"version=" 1.1">
LocalURIreferenceswithinancestor's'defs'element.


🎜>fill="url(#Gradient01)"/>


Takrifan elemen berkaitan grafik boleh dipautkan kepada dokumen menggunakan elemen penggunaan. Contohnya:

Salin kod

Kod tersebut adalah seperti berikut: xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www. w3.org/ 1999/xlink">

ExampleUse01-Simplecaseof'use'ona'rect'

fill="none "stroke="blue"stroke-width=".2"/>
Sila ambil perhatian penggunaan ruang nama xlink di sini. Walaupun kebanyakan penonton akan memaparkan ini dengan betul tanpanya, untuk konsistensi ruang nama xlink harus ditakrifkan pada elemen

Elemen penggunaan rujukan
Sebarang svg, simbol, g, elemen grafik tunggal dan elemen penggunaan pada asasnya boleh dirujuk dengan menggunakan elemen sebagai objek templat (seperti permulaan). Kandungan grafik yang dirujuk menggunakan akan dipaparkan di lokasi yang ditentukan. Tidak seperti elemen imej, elemen penggunaan tidak boleh merujuk keseluruhan dokumen. Elemen
guna juga mempunyai atribut x, y, lebar dan ketinggian Atribut ini boleh diabaikan Jika ia tidak ditinggalkan, koordinat atau panjang kandungan grafik yang dirujuk akan dipetakan ke ruang koordinat pengguna semasa. Fungsi

elemen penggunaan adalah bersamaan dengan penyalinan dalam objek yang dirujuk ke dalam pepohon DOM bukan awam bebas nod induk pepohon ini ialah elemen penggunaan. Walaupun ia adalah nod DOM bukan awam, ia masih merupakan nod DOM pada dasarnya, jadi semua nilai atribut, animasi, peristiwa, tetapan berkaitan CSS, dsb. objek yang dirujuk akan disalin dan masih akan berfungsi, dan nod ini akan juga mewarisi penggunaan Atribut relevan elemen dan gunakan nenek moyang (perhatikan bahawa unsur yang dirujuk adalah salinan dalam. Unsur yang disalin ini tidak ada kaitan dengan unsur asal, jadi sifat nod nenek moyang unsur yang dirujuk tidak akan diwarisi di sini) . Jika nod ini sendiri adalah sifat berkaitan ( CSS), dan juga akan menggantikan sifat yang diwarisi ini konsisten dengan nod DOM biasa, jadi berhati-hati apabila menggunakan "keterlihatan: tersembunyi" pada elemen penggunaan, kerana ia mungkin tidak semestinya berfungsi. Walau bagaimanapun, oleh kerana bahagian nod ini tidak umum, hanya elemen penggunaan boleh dilihat semasa operasi DOM, jadi hanya elemen penggunaan boleh dikendalikan.

Dari sudut pandangan kesan visual, elemen penggunaan lebih seperti pemegang tempat Kesan visual selepas pemaparan adalah sama seperti pemaparan secara langsung dengan objek yang dirujuk:
1.gunakan rujukan elemen. Unsur simbol
Dalam kes ini, kesan visual adalah bersamaan dengan:
(1) Gantikan elemen penggunaan dengan elemen g
(2) Bahagikan penggunaan dengan x, y, lebar, height, )Gantikan elemen simbol yang dirujuk dengan elemen svg ini secara eksplisit menggunakan atribut lebar dan ketinggian elemen penggunaan (elemen penggunaan tanpa atribut ini ialah 100%); daripada elemen simbol yang dirujuk Kandungan disalin dalam ke dalam svg yang diganti.

2. Elemen penggunaan merujuk kepada elemen svg

Dalam kes ini, kesan visual adalah bersamaan dengan: (1) Gantikan elemen penggunaan dengan elemen g; >(2 ) Alihkan semua atribut penggunaan kecuali x, y, lebar, tinggi, xlink:href ke elemen g (3) Tukar atribut x, y penggunaan kepada terjemah(x, y) dan tambahkan; kepada g Atribut transformasi elemen adalah terakhir;
(4) Salin elemen svg yang dirujuk termasuk kandungan Elemen svg ini secara eksplisit akan menggunakan atribut lebar dan ketinggian elemen penggunaan (elemen penggunaan akan menggunakan nilai asal. ​​jika ia tidak mempunyai atribut ini);

3 Situasi lain

Kesan visual dalam kes ini adalah bersamaan dengan:
(1) Gantikan elemen penggunaan dengan g. elemen; (2) Bahagikan penggunaan dengan x , y, lebar, tinggi, xlink: Semua atribut selain daripada href dipindahkan ke elemen g (3) Tukar atribut x, y untuk menterjemah(; x, y), dan tambahkannya pada penghujung atribut transformasi bagi elemen g;
(4) Salin elemen rujukan;




Salin kod

Kod tersebut adalah seperti berikut:

xmlns="http:///www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org /1999/xlink"> ExampleUse03-'use'witha'transform'attribute< /desc>

fill="none"stroke="blue"stroke-width=".2"/ >
transform="translate(20, 2.5)putar(10)"/>




Rupa gambar di bawah adalah sama seperti gambar di atas
:

Salin kod

Kod Seperti berikut:

xmlns="http://www.w3.org/2000/svg"version= "1.1"> ExampleUse03-'use'witha'transform'attribute< ;/desc> fill="none"stroke="blue"stroke-width=". 2"/>

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/