hujung hadapan web
Tutorial H5
HTML5 SVG 2D Pengenalan 1—SVG (Grafik Vektor Boleh Skala) Gambaran Keseluruhan_html5 Petua Tutorial
HTML5 SVG 2D Pengenalan 1—SVG (Grafik Vektor Boleh Skala) Gambaran Keseluruhan_html5 Petua Tutorial
Sebelum ini, grafik yang dipaparkan dalam penyemak imbas, seperti jpeg, gif, dll., semuanya adalah peta bit dan format imej ini berdasarkan raster. Dalam imej raster, fail imej mentakrifkan nilai warna setiap piksel dalam imej. Penyemak imbas perlu membaca nilai ini dan bertindak sewajarnya. Keupayaan pembiakan imej jenis ini agak kuat, tetapi ia akan kelihatan tidak mencukupi dalam beberapa situasi. Sebagai contoh, apabila penyemak imbas memaparkan imej pada saiz yang berbeza, tepi bergerigi sering terhasil, dan penyemak imbas perlu menginterpolasi atau meneka nilai untuk piksel yang tidak wujud dalam imej asal ini mengakibatkan herotan imej. Selain itu, peta bit menganimasikan, paling baik, terhad kepada menghasilkan animasi jenis "buku selak", di mana imej individu dipaparkan secara berturut-turut.
Grafik vektor mengatasi beberapa kesukaran ini dengan menyatakan arahan yang diperlukan untuk menentukan nilai setiap piksel, dan bukannya menentukan nilai itu sendiri. Sebagai contoh, bukannya memberikan nilai piksel untuk bulatan diameter satu inci, grafik vektor memberitahu penyemak imbas untuk mencipta bulatan diameter satu inci dan biarkan penyemak imbas (atau pemalam) melakukan yang lain. Ini menghilangkan banyak batasan grafik raster dengan grafik vektor, pelayar hanya tahu bahawa ia mesti melukis bulatan. Jika imej perlu dipaparkan pada tiga kali saiz biasa, penyemak imbas hanya melukis bulatan pada saiz yang betul tanpa perlu melakukan interpolasi biasa imej raster. Begitu juga, penyemak imbas menerima arahan yang boleh dikaitkan dengan lebih mudah kepada sumber maklumat luaran seperti aplikasi dan pangkalan data Untuk menghidupkan imej, penyemak imbas hanya menerima arahan tentang cara memanipulasi sifat seperti jejari atau warna.
Dalam sistem HTML, teknologi yang paling biasa digunakan untuk melukis grafik vektor ialah SVG dan elemen kanvas HTML5 yang baru ditambah. Kedua-dua teknologi menyokong lukisan vektor dan imej raster.
Gambaran Keseluruhan SVG
Grafik Vektor Boleh Skala (pendek kata SVG) ialah bahasa yang menggunakan XML untuk menerangkan grafik dua dimensi (SVG mengikut sintaks XML dengan ketat). SVG membenarkan tiga jenis objek grafik: bentuk grafik vektor (seperti laluan yang terdiri daripada garis lurus dan lengkung), imej dan teks. Objek grafik (termasuk teks) boleh dikumpulkan, digayakan, diubah dan digabungkan menjadi objek yang diberikan sebelum ini. Set ciri SVG termasuk transformasi bersarang, laluan keratan, topeng alfa dan objek templat.
Lukisan SVG adalah interaktif dan dinamik. Sebagai contoh, anda boleh menggunakan skrip untuk menentukan dan mencetuskan animasi. Ini sangat berkuasa berbanding Flash. Flash ialah fail binari, yang sukar dibuat dan diubah suai secara dinamik. SVG ialah fail teks, dan manipulasi dinamik agak mudah. Selain itu, SVG secara langsung menyediakan elemen yang relevan untuk melengkapkan animasi, yang sangat mudah untuk dikendalikan.
SVG serasi dengan piawaian web lain dan secara langsung menyokong Model Objek Dokumen DOM. Ini juga merupakan titik yang sangat berkuasa berbanding dengan kanvas dalam HTML5 (perhatikan di sini bahawa SVG juga menggunakan kanvas yang serupa secara dalaman untuk memaparkan grafik SVG. Kemudian anda akan mendapati bahawa banyak ciri agak serupa dengan kanvas HTML5; dalam artikel Jika ia tidak dinyatakan secara eksplisit bahawa ia adalah kanvas SVG, ia merujuk kepada elemen kanvas dalam HTML5). Oleh itu, banyak aplikasi lanjutan SVG boleh dilaksanakan dengan mudah menggunakan skrip. Selain itu, elemen grafik SVG pada asasnya menyokong acara standard dalam DOM. Sebilangan pengendali acara (seperti "onmouseover" dan "onclick") boleh diberikan kepada mana-mana objek grafik SVG. Walaupun kelajuan pemaparan SVG tidak sepantas elemen kanvas, kelebihannya ialah operasi DOM sangat fleksibel Kelebihan ini boleh menebus kelemahan dalam kelajuan.
SVG boleh dikatakan sebagai protokol dan bahasa; ia adalah elemen standard HTML dan format imej.
SVG bukanlah sesuatu dalam HTML5, tetapi ia dianggap sebagai salah satu teknologi web yang popular, jadi ia akan disertakan dalam topik ini buat masa ini.
Perbandingan SVG dan format imej lain
Berbanding dengan format imej lain, SVG mempunyai banyak kelebihan (banyak kelebihan datang daripada kelebihan grafik vektor):
• SVG The fail adalah XML tulen dan boleh dibaca dan diubah suai oleh banyak alat (seperti Notepad).
• SVG lebih kecil dan lebih mampat daripada imej JPEG dan GIF.
• SVG boleh berskala, boleh diperbesarkan tanpa kehilangan kualiti imej, dan boleh dicetak dengan kualiti tinggi pada sebarang resolusi.
• Teks dalam imej SVG adalah pilihan dan boleh dicari (bagus untuk membuat peta).
• SVG boleh berjalan dengan teknologi Java.
• SVG ialah standard terbuka.
Perbandingan SVG dan Flash
Pesaing utama SVG ialah Flash. Berbanding dengan Flash, kelebihan terbesar SVG ialah ia serasi dengan piawaian lain (seperti XSL dan DOM) dan mudah dikendalikan, manakala Flash ialah teknologi proprietari yang bukan sumber terbuka. Dalam aspek lain seperti format storan dan grafik yang dihasilkan secara dinamik, SVG juga mempunyai kelebihan yang besar.
Cara SVG dipersembahkan
Pelayar yang menyokong HTML5 dan SVG bukanlah tumpuan perbincangan di sini Pada asasnya, ia sudah cukup untuk memasang pelayar Chrome atau FireFox (IE pengguna sila Pasang sahaja IE9 Bagi versi sebelum IE9, anda perlu memasang pemalam SVG, yang akan dilangkau di sini). Untuk penyemak imbas yang menyokong SVG secara langsung, SVG menggunakan dua kaedah pembentangan pada kedua-dua belah pihak.
Sebaris ke dalam HTML
SVG ialah elemen HTML standard, yang boleh ditulis terus ke dalam HTML Lihat contoh berikut:
🎜>
;/svg> Simpan fail teks seperti fail dengan sambungan svg, seperti sun.svg, fail tersebut boleh dibuka terus dengan penyemak imbas atau dibenamkan sebagai rujukan muka surat. 2.HTML merujuk fail SVG luaran.
Salin kod
Kodnya adalah seperti berikut:
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
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1382
52
Mari kita bincangkan tentang cara menggunakan SVG untuk mencapai kesan mozek imej
Sep 01, 2022 am 11:05 AM
Bagaimana untuk menggunakan SVG untuk mencapai kesan mozek imej tanpa menggunakan Javascript? Artikel berikut akan memberi anda pemahaman terperinci, saya harap ia akan membantu anda!
Bagaimana untuk menukar format svg kepada jpg
Nov 24, 2023 am 09:50 AM
svg boleh ditukar kepada format jpg dengan menggunakan perisian pemprosesan imej, menggunakan alat penukaran dalam talian dan menggunakan perpustakaan pemprosesan imej Python. Pengenalan terperinci: 1. Perisian pemprosesan imej termasuk Adobe Illustrator, Inkscape dan GIMP 2. Alat penukaran dalam talian termasuk CloudConvert, Zamzar, Tukar Dalam Talian, dll. 3. Perpustakaan pemprosesan imej Python, dll.;
Analisis mendalam tentang cara menggunakan ikon svg dalam vue3 vite
Apr 28, 2022 am 10:48 AM
imej svg digunakan secara meluas dalam projek Artikel berikut akan memperkenalkan cara menggunakan ikon svg dalam vue3 vite.
Dihasilkan oleh Universiti Peking: SOTA terkini dengan kualiti tekstur dan konsistensi berbilang paparan, mencapai penukaran 3D satu imej dalam masa 2 minit
Jan 10, 2024 pm 11:09 PM
Ia hanya mengambil masa dua minit untuk menukar gambar kepada 3D! Ia juga jenis dengan kualiti tekstur yang tinggi dan konsistensi tinggi dalam pelbagai sudut tontonan. Tidak kira spesies apa pun, imej paparan tunggal semasa input masih seperti ini: Dua minit kemudian, versi 3D selesai: △ Atas, Repaint123 (NeRF, Repaint123 (GS) Kaedah baharu dipanggil Repaint123); Idea teras adalah untuk menggabungkan 2D Keupayaan penjanaan imej yang berkuasa bagi model resapan digabungkan dengan keupayaan penjajaran tekstur strategi lukis semula untuk menjana imej yang berkualiti tinggi dan konsisten merentas berbilang paparan. Di samping itu, kajian ini juga memperkenalkan kaedah keamatan pengecatan semula adaptif yang sedar keterlihatan untuk kawasan bertindih. Repaint123 menyelesaikan masalah kaedah sebelumnya seperti sisihan berbilang pandangan yang besar, degradasi tekstur dan penjanaan perlahan dalam satu kejadian. Item semasa
Tutorial pengenalan VUE3: Gunakan pemalam Vue.js untuk bermain dengan SVG
Jun 16, 2023 am 09:48 AM
Dengan pembangunan berterusan pembangunan hadapan Web moden, semakin banyak teknologi digunakan secara meluas dalam pembangunan sebenar. Antaranya, Vue.js kini merupakan salah satu rangka kerja JavaScript yang paling popular Ia berdasarkan model MVVM dan menyediakan API yang kaya dan perpustakaan komponen, menjadikannya lebih mudah untuk membangunkan aplikasi web yang responsif, boleh digunakan semula dan cekap. Berbanding dengan versi lama, versi Vue.js3 terkini mempunyai prestasi yang lebih baik dan ciri yang lebih kaya, yang telah menarik perhatian dan penyelidikan yang meluas. Artikel ini akan memperkenalkan kepada anda a
Penjelasan terperinci tentang penggunaan SVG untuk menambah logo pada favicon
Sep 07, 2022 am 10:30 AM
Bagaimana untuk menambah logo ke favicon menggunakan SVG? Artikel berikut akan memperkenalkan kepada anda cara menggunakan SVG untuk menjana favicon dengan logo. Saya harap ia akan membantu anda!
Bagaimana untuk menggunakan kaedah svg dalam vue3+vite2
May 11, 2023 pm 05:55 PM
1. Pasang vite-plugin-svg-icons Anda juga perlu memasang kebergantungan yang berkaitan dengan fast-glob. Jika tidak, apabila vite menjalankan npmrundev, ia akan melaporkan ralat Cannotfindmodule'fast-glob' npmifast-glob@3.x-Dnpmivite-. plugin-svg. -icons@2.x-D 2. Cipta komponen baharu index.vueimport{computed}from'vue';cons di bawah src/components/svgIcon
Bagaimana untuk menggunakan svg dalam vue3+vue-cli4
May 11, 2023 pm 05:58 PM
一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{dikira}dari"@vue/reactivity{name";exportbasedefault"; prop:{iconClass:{type:String},className:{type:String},},setup
