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 HTMLSetiap orang harus terbiasa dengan Dom. Berikut adalah contoh kecil:
<head>
<tyle>
#svgcontainer {
Lebar: 400px;
Tinggi: 400px;
Latar Belakang-Color: #A0A0A0;
}
</tyle>
<script>
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 onload = "createSvg ()">
<Div id = "svgcontainer"> </div>
</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 svgJika 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">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<svg xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">
<type skrip = "Teks/ecmascript">
<! [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>
<g id = "firstgroup">
<rect id = "mybluerect" x = "40" y = "20" fill = "blue" ontClick = "showrecTarea (evt)"/>
<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