


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:
>
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.
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
>
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:
Takrifan elemen berkaitan grafik boleh dipautkan kepada dokumen menggunakan elemen penggunaan. Contohnya:
Salin kod
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:
Rupa gambar di bawah adalah sama seperti gambar di atas
:
Salin kod
Kod Seperti berikut:
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/

Kod HTML5 terdiri daripada tag, elemen dan atribut: 1. Tag mentakrifkan jenis kandungan dan dikelilingi oleh kurungan sudut, seperti. 2. Unsur terdiri daripada tag permulaan, kandungan dan tag akhir, seperti kandungan. 3. Atribut menentukan pasangan nilai utama dalam tag permulaan, meningkatkan fungsi, seperti. Ini adalah unit asas untuk membina struktur web.

HTML5 adalah teknologi utama untuk membina laman web moden, menyediakan banyak elemen dan ciri -ciri baru. 1. HTML5 memperkenalkan unsur -unsur semantik seperti, dan lain -lain, yang meningkatkan struktur laman web dan SEO. 2. Sokongan unsur multimedia dan menanamkan media tanpa pemalam. 3. Borang meningkatkan jenis input baru dan sifat pengesahan, memudahkan proses pengesahan. 4. Menawarkan fungsi storan luar talian dan tempatan untuk meningkatkan prestasi laman web dan pengalaman pengguna.

Amalan terbaik untuk kod H5 termasuk: 1. Gunakan pengisytiharan dan pengekodan watak yang betul; 2. Gunakan tag semantik; 3. Mengurangkan permintaan HTTP; 4. Gunakan pemuatan asynchronous; 5. Mengoptimumkan imej. Amalan ini dapat meningkatkan kecekapan, penyelenggaraan dan pengalaman pengguna halaman web.

Piawaian dan teknologi web telah berkembang dari HTML4, CSS2 dan JavaScript mudah setakat ini dan telah menjalani perkembangan yang ketara. 1) HTML5 memperkenalkan API seperti kanvas dan webstorage, yang meningkatkan kerumitan dan interaktiviti aplikasi web. 2) CSS3 menambah fungsi animasi dan peralihan untuk menjadikan halaman lebih berkesan. 3) JavaScript meningkatkan kecekapan pembangunan dan kebolehbacaan kod melalui sintaks moden node.js dan ES6, seperti fungsi anak panah dan kelas. Perubahan ini telah mempromosikan pembangunan pengoptimuman prestasi dan amalan terbaik aplikasi web.

H5 bukan sekadar singkatan HTML5, ia mewakili ekosistem teknologi pembangunan web moden yang lebih luas: 1. H5 termasuk HTML5, CSS3, JavaScript dan API dan Teknologi yang berkaitan; 2. Ia menyediakan pengalaman pengguna yang lebih kaya, interaktif dan lancar, dan boleh berjalan dengan lancar pada pelbagai peranti; 3. Menggunakan timbunan teknologi H5, anda boleh membuat laman web responsif dan fungsi interaktif yang kompleks.

H5 dan HTML5 merujuk kepada perkara yang sama, iaitu HTML5. HTML5 adalah versi kelima HTML, membawa ciri -ciri baru seperti tag semantik, sokongan multimedia, kanvas dan grafik, penyimpanan luar talian dan penyimpanan tempatan, meningkatkan ekspresi dan interaktiviti laman web.

H5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelementsandapisforrich, dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enhancusexperienceaceacrossdevices.3) SemantikelementsImproveContentstructureandseo.4) H5'srespo

Alat dan kerangka yang perlu dikuasai dalam pembangunan H5 termasuk Vue.js, React dan Webpack. 1.vue.js sesuai untuk membina antara muka pengguna dan menyokong pembangunan komponen. 2. Leact mengoptimumkan rendering halaman melalui DOM maya, sesuai untuk aplikasi yang kompleks. 3.WebPack digunakan untuk pembungkusan modul dan mengoptimumkan beban sumber.


Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

AI Hentai Generator
Menjana ai hentai secara percuma.

Artikel Panas

Alat panas

MinGW - GNU Minimalis untuk Windows
Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

Dreamweaver CS6
Alat pembangunan web visual

Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna

ZendStudio 13.5.1 Mac
Persekitaran pembangunan bersepadu PHP yang berkuasa

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma