HTML5 SVG 2D Pendahuluan 12 - Pengantar SVG DOM dan Operasi DOM

Penulis：Eve Cole Waktu Pembaruan：2025-04-03 16:00:04

Menggunakan skrip dapat dengan mudah menyelesaikan berbagai tugas kompleks, dan juga merupakan cara utama untuk menyelesaikan animasi dan interaksi. Karena SVG adalah elemen HTML, ia mendukung operasi DOM biasa. Karena SVG pada dasarnya adalah dokumen XML, ada juga operasi DOM khusus, yang sebagian besar disebut SVG DOM. Tentu saja, karena IE tidak mendukung SVG saat ini, mengembangkan halaman SVG berdasarkan IE memerlukan metode yang berbeda. Semua orang sebenarnya sangat akrab dengan bagian dari pengetahuan ini, jadi mari kita lihat secara singkat di bawah ini.

Operasi DOM di halaman HTML

Setiap orang harus terbiasa dengan Dom. Berikut adalah contoh kecil:

<head>

<tyle>

#svgcontainer {

Lebar: 400px;

Tinggi: 400px;

Latar Belakang-Color: #A0A0A0;

}

</tyle>

fungsi createSvg () {

var xmlns = "http://www.w3.org/2000/svg";

var boxwidth = 300;

var boxheight = 300;

var svgelem = document.createelementns (xmlns, "svg");

svgelem.setAttributens (null, "viewbox", "0 0" + boxwidth + "" + boxheight);

svgelem.setattributens (null, "width", boxwidth);

svgelem.setattributens (null, "height", boxheight);

svgelem.style.display = "block";

var g = document.createElementns (xmlns, "g");

svgelem.AppendChild (G);

g.setattributens (null, 'transform', 'matrix (1,0,0, -1,0.300)');

// Gambar gradien linier

var defs = document.createElementns (xmlns, "defs");

var grad = document.createElementns (xmlns, "lineargradient");

grad.setattributens (null, "id", "gradient");

grad.setattributens (null, "x1", "0%");

grad.setattributens (null, "x2", "0%");

grad.setattributens (null, "y1", "100%");

grad.setattributens (null, "y2", "0%");

var stoptop = document.createelementns (xmlns, "stop");

stoptop.setattributens (null, "offset", "0%");

stoptop.setattributens (null, "stop-color", "#ff0000");

grad.AppendChild (stoptop);

var stopbottom = document.createelementns (xmlns, "stop");

stopbottom.setattributens (null, "offset", "100%");

stopbottom.setattributens (null, "stop-color", "#0000ff");

grad.AppendChild (Stopbottom);

defs.appendchild (lulusan);

G.AppendChild (DEFS);

// Gambar perbatasan

var koordinat = "m 0, 0";

koordinat += "l 0, 300";

koordinat += "l 300, 0";

coords += "l 0, -300";

coords += "l -300, 0";

var path = document.createElementns (xmlns, "path");

path.setattributens (null, 'stroke', "#000000");

path.setattributens (null, 'stroke-lebar', 10);

path.setAttributens (null, 'stroke-linejoin', "round");

path.setattributens (null, 'd', koordinat);

path.setAttributens (null, 'Fill', "url (#Gradient)");

path.setattributens (null, 'opacity', 1.0);

G.AppendChild (Path);

var svgcontainer = document.geteLementById ("svgcontainer");

svgcontainer.appendchild (svgelem);

}

</script>

</head>

</body>

Sudahkah Anda menemukannya? Persis sama dengan operasi DOM dari elemen HTML biasa:

Pilih Elemen: Document.GetElementById

Buat elemen: Document.CreateElementNS

Cara lain untuk membuat elemen anak: elemen.createChildns

Tambahkan Elemen: Node.AppendChild

Atur atribut elemen: elemen.setAttributens/element.setAttribute

Selain operasi di atas, operasi dan properti berikut juga sangat umum:

Dapatkan nilai atribut dari elemen: element.getattributens/element.getAttribute

Periksa apakah ada atribut dalam suatu elemen: elemen.hasattributensens

Hapus atribut elemen: elemen.removeattributens

Elemen induk, elemen anak dan node saudara: element.parentnode/element.firstchild/child.nextsibling

Metode -metode ini tidak akan diperkenalkan secara rinci di sini; Selain itu, struktur simpul pohon DOM dan hubungan warisan antara objek serupa, jadi saya tidak akan menjelaskan secara rinci. Siswa yang membutuhkannya akan merujuk pada dokumentasi untuk objek inti DOM di bawah ini.

Namun, perlu dicatat bahwa SVG pada dasarnya adalah dokumen XML, sehingga metode DOM pada dasarnya digunakan adalah metode dengan NS yang berakhir untuk menyediakan ruang nama terkait; Jika namespace sudah disediakan saat membuat elemen dan tidak ada masalah dengan beberapa namespaces, maka saat mengatur atribut terkait, Anda juga dapat memilih untuk menggunakan versi tanpa NS, seperti menggunakan elemen.setAttribute untuk mengatur nilai atribut secara langsung. Namun, secara umum, masih sangat disarankan untuk menggunakan versi dengan akhir NS, karena versi ini selalu berfungsi secara normal, bahkan dalam kasus beberapa ruang nama.

SVG DOM

Saya belum menemukan informasi komprehensif tentang ini dan DOM standar. Saat ini, saya hanya tahu bahwa metode penugasan atribut berbeda. Jika Anda memiliki siswa yang memahami ini, tolong beri saya pesan.

Dalam contoh di atas, kami menggunakan element.setAttributens/element.setAttribute untuk menetapkan nilai ke atribut. Di SVG DOM, kita dapat menggunakan metode berorientasi objek untuk menetapkan nilai ke atribut objek melalui titik akses. Misalnya, berikut ini adalah perbandingan dari dua metode:

Metode DOM biasa:

element.setAttribute ("x", "10");

element.setAttribute ("y", "20");

element.setAttribute ("lebar", "100%");

element.setAttribute ("Height", "2em");

Dan metode SVG DOM:

element.x.baseval.value = 10;

element.y.baseval.value = 20;

element.width.baseval.newvaluespecifiedUnits (svglength.svg_lengthtype_percentage, 100);

element.height.baseval.newvaluespecifiedUnits (svglength.svg_lengthtype_ems, 10);

Skrip DOM adalah skrip tradisional, dan karakteristiknya adalah mengatur item individual dengan membangun nilai string. Keuntungan dari gaya skrip SVG DOM adalah Anda tidak perlu membangun string nilai, jadi kinerja lebih baik daripada skrip DOM.

Skrip tertanam dalam svg

Jika Anda ingin menambahkan skrip di dalam SVG, Anda perlu menggunakan elemen skrip. Ini telah disebutkan sebelumnya. Selain itu, pada dasarnya sama dengan menempatkan skrip di HTML di luar. Lihat contoh:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

</head>

<body>

<! [CDATA [

fungsi showrectcolor () {

alert (document.geteLementById ("mybluerect"). getattributens (null, "fict"));

}

function showrecTarea (evt) {

var width = parsefloat (evt.target.getattributens (null, "width"));

var height = parsefloat (evt.target.getattributens (null, "height"));

peringatan ("Area persegi panjang adalah:" + (lebar * tinggi));

}

fungsi showrooChildrennr () {

alert ("nr anak -anak:"+document.documentelement.childnodes.length);

}

]]>

</script>

<text x = "40" y = "100" ontClick = "showrectColor ()"> Klik pada teks ini untuk menampilkan warna persegi panjang. </sext>

<Text x = "40" y = "130"> Klik pada persegi panjang untuk menampilkan area persegi panjang. </text>

<Text x = "40" y = "160" OnClick = "showrootchildrennr ()"> Klik pada teks ini untuk menunjukkan jumlah anak

<tspan x = "40" dy = "20"> elemen elemen root. </span> </text>

</g>

</svg>

</body>

</html>

Dalam contoh ini, cara umum untuk mendapatkan objek DOM terdaftar :

1. Dapatkan objek melalui metode seperti document.getElementById atau document.getElementByclassName;

2. Dapatkan objek Dokumen melalui Document.DocumentElement atau Document.RooteLement;

3. Dapatkan objek yang menghasilkan acara melalui parameter acara EVT.target. Keuntungan dari metode ini adalah Anda bisa mendapatkan objek yang menghasilkan acara tanpa menggunakan ID.

Sisa skrip pada dasarnya sama dengan DOM biasa.

Referensi Praktis:

Indeks skrip: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Pusat Pengembangan: https://developer.mozilla.org/en/svg

Referensi Populer: http://www.chinasvg.com/

Dokumen Resmi: http://www.w3.org/tr/svg11/

DOM Core Object API: http://reference.sitepoint.com/javascript/document

Properti Umum dan Metode SVG DOM: http://riso.iteeye.com/blog/393454, http://riso.iteeye.com/blog/393459