hujung hadapan web
Tutorial H5
Pengenalan kepada SVG 2D dalam HTML5 12—Pengenalan kepada kemahiran tutorial SVG DOM dan operasi DOM_html5
Pengenalan kepada SVG 2D dalam HTML5 12—Pengenalan kepada kemahiran tutorial SVG DOM dan operasi DOM_html5
Menggunakan skrip boleh menyelesaikan pelbagai tugas yang kompleks dengan mudah, dan ia juga merupakan cara arus perdana untuk melengkapkan animasi dan interaksi. Memandangkan SVG ialah elemen html, ia menyokong operasi DOM biasa Dan kerana SVG pada asasnya ialah dokumen xml, terdapat juga operasi DOM khas, yang kebanyakannya dipanggil SVG DOM. Sudah tentu, memandangkan IE pada masa ini tidak menyokong SVG, membangunkan halaman SVG berdasarkan IE memerlukan kaedah yang berbeza. Semua orang sebenarnya sudah biasa dengan bahagian pengetahuan ini, jadi mari kita lihat secara ringkas.
Operasi DOM dalam halaman HTML
Semua orang harus biasa dengan DOM Berikut ialah contoh kecil:
var boxWidth = 300;
var boxHeight = 300;
svgElem.setAttributeNS (null, "viewBox", "0 0 " boxWidth " " boxHeight;
svgElem.setAttributeNS (null, "width", boxWidth); " , boxHeight);
svgElem.style.display = "block";
var g = document.createElementNS (xmlns, "g");
svgElem.appendChild (g);
g. setAttributeNS (null, 'transform', 'matriks(1,0,0,-1,0,300)');
var grad = document.createElementNS (xmlns, "linearGradient");
grad.setAttributeNS (null, "id", "gradient"); % ");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null , "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop"); stopTop .setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop); setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); appendChild (grad);
g.appendChild (defs);
// draw borders
var coords = "M 0, 0"; coords = " l 300, 0";
coords = " l 0, -300"; );
path.setAttributeNS (null, 'stroke', "#000000"); - linejoin', "round");
path.setAttributeNS (null, 'd', coords
path.setAttributeNS (null, 'fill', "url(#gradient)"); laluan .setAttributeNS (null, 'opacity', 1.0); > }
;
Adakah anda perasan, operasi DOM bagi elemen html biasa adalah sama:
Pilih elemen: document.getElementById
Create element: document.createElementNS
Cara lain untuk mencipta elemen anak: element
Tambah elemen: node.appendChild
Tetapkan atribut elemen: element.setAttributeNS/element.setAttribute
Selain operasi di atas, operasi dan atribut berikut juga biasa:
Dapatkan elemen elemen atribut Nilai atribut: element.getAttributeNS/element.getAttribute
Semak sama ada atribut wujud pada elemen: element.hasAttributeNS
Alih keluar atribut elemen: element.removeAttributeNS
Elemen induk, elemen anak dan nod adik beradik : element. parentNode/element.firstChild/child.nextSibling
Kaedah ini tidak akan diperkenalkan secara terperinci di sini, selain itu, struktur nod pokok DOM dan hubungan warisan antara objek juga serupa, jadi ia tidak akan menjadi; diterangkan secara terperinci. Pelajar yang memerlukannya boleh merujuk kepada dokumentasi Objek Teras DOM nanti.
Walau bagaimanapun, perlu diingatkan bahawa SVG pada asasnya ialah dokumen XML, jadi kaedah DOM asas yang digunakan semuanya berakhir dengan NS untuk menyediakan ruang nama yang berkaitan jika ruang nama telah disediakan semasa mencipta elemen dan tidak terdapat berbilang ruang nama masalah, maka apabila menetapkan atribut yang berkaitan, anda juga boleh memilih untuk menggunakan versi tanpa NS, seperti terus menggunakan element.setAttribute untuk menetapkan nilai atribut, tetapi secara umum, masih sangat disyorkan untuk menggunakan versi dengan pengakhiran NS, kerana versi ini sentiasa Ia berfungsi dengan baik, walaupun dalam kes berbilang ruang nama.
SVG DOM
Bagaimana ini berbeza daripada DOM standard Saya tidak menemui sebarang maklumat yang komprehensif pada masa ini, saya hanya tahu bahawa kaedah menetapkan atribut adalah berbeza. Jika ada pelajar yang tahu tentang perkara ini, sila maklumkan kepada saya.
Dalam contoh di atas, kami menggunakan element.setAttributeNS/element.setAttribute untuk menetapkan nilai kepada atribut Dalam SVG DOM, anda boleh menggunakan kaedah berorientasikan objek untuk menetapkan nilai kepada atribut objek dengan mengakses titik. nombor. Contohnya, berikut ialah dua Perbandingan kaedah:
Kaedah DOM biasa:
element.setAttribute("x", "10");
element.setAttribute("y", "20"); ("lebar", "100%");
elemen.setAttribute("tinggi", "2em"); >
Kod tersebut adalah seperti berikut:
Jika anda ingin menambah skrip di dalam SVG, anda perlu menggunakan elemen skrip Ini telah dinyatakan sebelum ini sama seperti meletakkan skrip dalam Ia sama ke dalam HTML luaran. Lihat contoh:
Salin kod
Kodnya adalah seperti berikut:
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.;
Apakah cara untuk mendapatkan nod DOM dalam Vue3
May 11, 2023 pm 04:55 PM
1. Native js mendapat nod DOM: document.querySelector (pemilih) document.getElementById (pemilih id) document.getElementsByClassName (pemilih kelas).... 2. Dapatkan objek contoh komponen semasa dalam vue2: kerana setiap vue Setiap contoh komponen mengandungi objek $refs, yang menyimpan rujukan kepada elemen atau komponen DOM yang sepadan. Jadi secara lalai, $refs komponen menghala ke objek kosong. Mula-mula anda boleh menambah ref="name" pada komponen, dan kemudian lulus ini.$refs.
Panduan manipulasi DOM dalam PHP
May 21, 2023 pm 04:01 PM
Dalam pembangunan web, DOM (DocumentObjectModel) adalah konsep yang sangat penting. Ia membolehkan pembangun mengubah suai dan mengendalikan dokumen HTML atau XML halaman web dengan mudah, seperti menambah, memadam, mengubah suai elemen, dsb. Pustaka operasi DOM terbina dalam dalam PHP juga menyediakan pembangun dengan fungsi yang kaya Artikel ini akan memperkenalkan panduan operasi DOM dalam PHP, dengan harapan dapat membantu semua orang. Konsep asas DOM DOM ialah merentas platform, API bebas bahasa yang boleh
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.
Apakah maksud vue dom?
Dec 20, 2022 pm 08:41 PM
DOM ialah model objek dokumen dan antara muka untuk pengaturcaraan HTML dalam halaman dimanipulasi melalui DOM. DOM ialah perwakilan objek dalam memori bagi dokumen HTML, dan ia menyediakan cara untuk berinteraksi dengan halaman web menggunakan JavaScript. DOM ialah hierarki (atau pokok) nod dengan nod dokumen sebagai akarnya.
Apakah sebab mengapa ref mengikat dom atau komponen gagal dalam vue3 dan cara menyelesaikannya
May 12, 2023 pm 01:28 PM
DOM pengikat Vue3ref atau penerangan senario analisis sebab kegagalan komponen Dalam Vue3, ia sering digunakan untuk menggunakan ref untuk mengikat komponen atau elemen DOM Banyak kali, ref digunakan dengan jelas untuk mengikat komponen berkaitan, tetapi pengikatan ref sering gagal. Contoh situasi kegagalan pengikatan ref Sebilangan besar kes di mana pengikatan ref gagal ialah apabila ref diikat pada komponen, komponen itu belum lagi diberikan, jadi pengikatan gagal. Atau komponen tidak diberikan pada permulaan dan ref tidak terikat Apabila komponen mula membuat, ref juga mula terikat, tetapi pengikatan antara ref dan komponen tidak selesai apabila menggunakan kaedah berkaitan komponen. Komponen terikat kepada ref menggunakan v-if, atau komponen induknya menggunakan v-if untuk menyebabkan halaman tersebut
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
