Pengenalan kepada SVG 2D dalam HTML5 12—Pengenalan kepada kemahiran tutorial SVG DOM dan operasi DOM

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:

Salin kodKod adalah seperti berikut:

= "http://www.w3.org/2000/svg";
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:

Salin kod

Kodnya adalah seperti berikut:

element.setAttribute("x", "10");
element.setAttribute("y", "20"); ("lebar", "100%");
elemen.setAttribute("tinggi", "2em"); >

Salin kod

Kod tersebut adalah seperti berikut:

elemen.x.baseVal.value = 10; .y.baseVal.value = 20; elemen.lebar .baseVal.newValueSpecifiedUnit(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100); 🎜>Skrip DOM ialah skrip tradisional, yang dicirikan dengan menghantar "rentetan nilai" Bina untuk menetapkan item individu. Kelebihan gaya skrip SVG DOM ialah anda tidak perlu membina "rentetan nilai", jadi prestasinya lebih baik daripada skrip DOM.

Skrip dibenamkan dalam SVG

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:

Artikel terbaru oleh pengarang