HTML5 SVG 2D บทนำ 12 - บทนำสู่การดำเนินการ SVG DOM และ DOM

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-03 16:00:04

การใช้สคริปต์สามารถทำงานที่ซับซ้อนได้อย่างง่ายดายและเป็นวิธีหลักในการสร้างภาพเคลื่อนไหวและการโต้ตอบให้สมบูรณ์ เนื่องจาก SVG เป็นองค์ประกอบของ HTML จึงรองรับการดำเนินงาน DOM ทั่วไป เนื่องจาก SVG เป็นเอกสาร XML เป็นหลักจึงมีการดำเนินการ DOM พิเศษซึ่งส่วนใหญ่เรียกว่า SVG DOM แน่นอนเนื่องจาก IE ไม่สนับสนุน SVG ในปัจจุบันการพัฒนาหน้า SVG ตาม IE ต้องใช้วิธีการที่แตกต่างกัน จริง ๆ แล้วทุกคนคุ้นเคยกับความรู้ในส่วนนี้ดังนั้นลองมาดูกันในเวลาสั้น ๆ ด้านล่าง

การดำเนินงาน DOM ในหน้า HTML

ทุกคนควรคุ้นเคยกับ DOM นี่คือตัวอย่างเล็ก ๆ :

<head>

<style>

#svgcontainer {

ความกว้าง: 400px;

ความสูง: 400px;

พื้นหลังสี: #A0A0A0;

</style>

ฟังก์ชั่น 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, "ความสูง", 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)');

// วาดการไล่ระดับสีเชิงเส้น

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

var grad = document.createElementNs (XMLNS, "linearGradient");

Grad.setAttributens (Null, "ID", "GRADITION");

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, "หยุด");

Stoptop.setAttributens (Null, "Offset", "0%");

Stoptop.setAttributens (Null, "Stop-Color", "#FF0000");

Grad.appendchild (stoptop);

var stopbottom = document.createelementns (xmlns, "หยุด");

Stopbottom.setAttributens (Null, "Offset", "100%");

Stopbottom.setAttributens (Null, "Stop-Color", "#0000ff");

Grad.appendchild (stopbottom);

defs.appendchild (ผู้สำเร็จการศึกษา);

G.AppendChild (defs);

// วาดเส้นขอบ

var coordinates = "M 0, 0";

พิกัด += "L 0, 300";

พิกัด += "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-Width', 10);

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

path.setattributens (null, 'd', พิกัด);

path.setAttributens (null, 'fill', "url (#gradient)");

path.setattributens (null, 'ความทึบ', 1.0);

G.AppendChild (เส้นทาง);

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

svgcontainer.appendchild (svgelem);

</script>

</head>

</body>

คุณค้นพบแล้วหรือยัง? มันเหมือนกับการทำงานของ DOM ขององค์ประกอบ HTML สามัญ:

เลือกองค์ประกอบ: document.getElementById

สร้างองค์ประกอบ: document.createlementns

อีกวิธีหนึ่งในการสร้างองค์ประกอบเด็ก: Element.Createchildns

เพิ่มองค์ประกอบ: Node.AppendChild

ตั้งค่าแอตทริบิวต์ขององค์ประกอบ: element.setAttributens/element.setAttribute

นอกเหนือจากการดำเนินการข้างต้นการดำเนินการและคุณสมบัติต่อไปนี้ยังเป็นเรื่องธรรมดามากเช่นกัน:

รับค่าแอตทริบิวต์ขององค์ประกอบ: element.getattributens/element.getAttribute

ตรวจสอบว่าแอตทริบิวต์มีอยู่ในองค์ประกอบ: element.hasattributens

ลบแอตทริบิวต์ขององค์ประกอบ: element.removeattributens

องค์ประกอบหลัก, องค์ประกอบเด็กและโหนดพี่น้อง: element.parentNode/Element.firstchild/child.nextsibling

วิธีการเหล่านี้จะไม่ได้รับการแนะนำในรายละเอียดที่นี่ นอกจากนี้โครงสร้างโหนดของต้นไม้ DOM และความสัมพันธ์ระหว่างวัตถุนั้นคล้ายกันดังนั้นฉันจะไม่อธิบายรายละเอียด นักเรียนที่ต้องการมันจะอ้างถึงเอกสารสำหรับวัตถุ DOM Core ด้านล่าง

อย่างไรก็ตามควรสังเกตว่า SVG เป็นเอกสาร XML เป็นหลักดังนั้นวิธี DOM โดยทั่วไปใช้เป็นวิธีที่มี NS สิ้นสุดเพื่อให้เนมสเปซที่เกี่ยวข้อง หากเนมสเปซได้รับการจัดเตรียมไว้แล้วเมื่อสร้างองค์ประกอบและไม่มีปัญหากับเนมสเปซหลายตัวจากนั้นเมื่อตั้งค่าแอตทริบิวต์ที่เกี่ยวข้องคุณยังสามารถเลือกใช้เวอร์ชันที่ไม่มี NS เช่นการใช้ Element.setAttribute เพื่อตั้งค่าแอตทริบิวต์โดยตรง อย่างไรก็ตามโดยทั่วไปยังคงแนะนำให้ใช้เวอร์ชันที่มีการสิ้นสุดของ NS เนื่องจากรุ่นนี้ใช้งานได้ตามปกติแม้ในกรณีของเนมสเปซหลายตัว

SVG DOM

ฉันไม่พบข้อมูลที่ครอบคลุมเกี่ยวกับเรื่องนี้และ DOM มาตรฐาน ในปัจจุบันฉันรู้เพียงว่าวิธีการมอบหมายของแอตทริบิวต์นั้นแตกต่างกัน หากคุณมีนักเรียนที่เข้าใจสิ่งนี้โปรดส่งข้อความถึงฉัน

ในตัวอย่างข้างต้นเราใช้ Element.setAttributens/Element.setAttribute เพื่อกำหนดค่าให้กับแอตทริบิวต์ ใน SVG DOM เราสามารถใช้วิธีการเชิงวัตถุเพื่อกำหนดค่าให้กับแอตทริบิวต์วัตถุผ่านจุดเชื่อมต่อ ตัวอย่างเช่นต่อไปนี้คือการเปรียบเทียบสองวิธี:

วิธี DOM ธรรมดา:

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

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

element.setAttribute ("ความกว้าง", "100%");

element.setAttribute ("ความสูง", "2EM");

และวิธี 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);

สคริปต์ DOM เป็นสคริปต์แบบดั้งเดิมและลักษณะของพวกเขาคือการตั้งค่าแต่ละรายการโดยการสร้างสตริงค่า ข้อได้เปรียบของสไตล์สคริปต์ SVG DOM คือคุณไม่จำเป็นต้องสร้างสตริงค่าดังนั้นประสิทธิภาพจึงดีกว่าสคริปต์ DOM

สคริปต์ที่ฝังอยู่ใน SVG

หากคุณต้องการเพิ่มสคริปต์ภายใน SVG คุณต้องใช้องค์ประกอบสคริปต์ สิ่งนี้ได้รับการกล่าวถึงก่อนหน้านี้ นอกจากนี้มันก็เหมือนกับการใส่สคริปต์ใน HTML ด้านนอก ดูตัวอย่าง:

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

<head>

</head>

<body>

<! [cdata [

ฟังก์ชั่น showrectColor () {

การแจ้งเตือน (document.getElementById ("mybluerect"). getattributens (null, "เติม"));

ฟังก์ชั่น showrectarea (evt) {

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

var height = parsefloat (evt.target.getattributens (null, "ความสูง"));

การแจ้งเตือน ("พื้นที่สี่เหลี่ยมคือ:" + (ความกว้าง * ความสูง));

ฟังก์ชั่น showroothildrennr () {

การแจ้งเตือน ("nr ของเด็ก:"+document.documentelement.childnodes.length);

</script>

<text x = "40" y = "100" onclick = "showrectColor ()"> คลิกที่ข้อความนี้เพื่อแสดงสีสี่เหลี่ยมผืนผ้า </text>

<text x = "40" y = "130"> คลิกที่สี่เหลี่ยมเพื่อแสดงพื้นที่สี่เหลี่ยมผืนผ้า </text>

<text x = "40" y = "160" onclick = "sweetroothildrennr ()"> คลิกที่ข้อความนี้เพื่อแสดงจำนวนเด็ก

<tspan x = "40" dy = "20"> องค์ประกอบขององค์ประกอบรูท </tspan> </text>

</g>

</svg>

</body>

</html>

ในตัวอย่างนี้วิธีทั่วไปในการรับวัตถุ DOM มีการระบุไว้ :

1. รับวัตถุผ่านวิธีการเช่น document.getElementById หรือ document.getElementByClassName;

2. รับวัตถุเอกสารผ่าน document.documentelement หรือ document.rootelement;

3. รับวัตถุที่สร้างเหตุการณ์ผ่านพารามิเตอร์เหตุการณ์ evt.target ข้อดีของวิธีนี้คือคุณสามารถรับวัตถุที่สร้างเหตุการณ์โดยไม่ต้องใช้ ID

ส่วนที่เหลือของสคริปต์นั้นเหมือนกับ DOM ธรรมดา

การอ้างอิงเชิงปฏิบัติ:

ดัชนีสคริปต์: http://msdn.microsoft.com/zh-cn/library/ff97110(v=vs.85).aspx

ศูนย์พัฒนา: https://developer.mozilla.org/en/svg

ข้อมูลอ้างอิงยอดนิยม: http://www.chinasvg.com/

เอกสารอย่างเป็นทางการ: http://www.w3.org/tr/svg11/

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

คุณสมบัติและวิธีการทั่วไปของ SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459