Thành phần ‘script’ tương đương với thành phần ‘script’ trong ngơn ngữđánh dấu siêu văn bản HTML. Đây là nơi viết script (bằng ngơn ngữ ECMAScript). Bất kỳ hàm nào được định nghĩa trong thành phần ‘script’ đều cĩ phạm vi tồn cục cho tồn bộ tài liệu hiện tại. Bằng cách kết hợp ngơn ngữ ECMAScript và SVG DOM, chúng ta cĩ thể truy cập đến tất cả các thành phần SVG trong tài liệu, như thêm, xĩa các thành phần trong cây tài liệu, chỉnh sửa thuộc tính… để làm cho tài liệu SVG cĩ thể tương tác với người dùng.
Ví dụ 1:
Ví dụ sau định nghĩa một hàm circle_click được triệu gọi bởi thuộc tính sự
kiện ‘onclick’ trên thành phần ‘circle’. Khi nhấp chuột lên hình trịn, hình trịn thay
đổi bán kính. Hình bên trái dưới đây là hình ảnh ban đầu. Hình bên phải minh họa kết quả sau khi nhấp chuột lên hình trịn.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="6cm" height="5cm" viewBox="0 0 600 500"
144
xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event
</desc>
<!-- ECMAScript to change the radius with each click --> <script type="text/ecmascript"> <![CDATA[
function circle_click(evt) { var circle = evt.target;
var currentRadius = circle.getAttribute("r"); if (currentRadius == 100) circle.setAttribute("r", currentRadius*2); else circle.setAttribute("r", currentRadius*0.5); } ]]> </script>
<!-- Outline the drawing area with a blue line --> <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>
<!-- Act on each click event -->
<circle onclick="circle_click(evt)" cx="300" cy="225" r="100"
fill="red"/> <text x="300" y="480"
font-family="Verdana" font-size="35" text- anchor="middle">
Click on circle to change its size </text>
</svg>
Kết quả trước và sau khi nhấp chuột lên hình trịn trên trình duyệt:
Một số thuộc tính của thành phần ‘script’:
• type= “content-type”
145
Chỉ định ngơn ngữ viết script cho thành phần ‘script’ được cho. Giá trị content-type chỉđịnh một loại phương tiện.
Script cĩ thểđược nhúng vào tài liệu SVG trong thành phần ‘script’ như ví dụ
trên, hoặc cũng cĩ thể nằm trong một tập tin script (*.js) được liên kết vào trong tài liệu như sau:
Tập tin “createnode.js” chứa đoạn script sau: function pinta() { var circleNode = svgDocument.createElement("circle"); circleNode.setAttribute("cx", 300*Math.random()); circleNode.setAttribute("cy", 300*Math.random()); circleNode.setAttribute("r", 30);
circleNode.setAttribute("style", "stroke: none; " + "opacity: 0.3; " + "fill: rgb(" + 255*Math.random() + "," + 255*Math.random() + "," + 255*Math.random() + ");"); setTimeout("window.pinta()", 300);/*sau 0.3s gọi pinta() này một lần*/ document.getElementById("dr").appendChild(circleNode); }
Nội dung SVG tham chiếu tới tập tin SVG trên thơng qua thuộc tính ‘xlink:href’ : (adsbygoogle = window.adsbygoogle || []).push({});
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd ">
<svg width="300" height="300" onload="pinta()"> <script type="text/ecmascript"
xlink:href="createnode.js"> </script>
<g id="dr" /> </svg>
146 Kết quả trên trình duyệt sau một thời gian:
Hình 3.39. Minh họa bộ timer và thuộc tính mờ ‘opaque’
3.19.3 Quản lý sự kiện
Các sự kiện chính là nguyên nhân kích hoạt script.
• Các thuộc tính sự kiện (event attribute) như “onclick” hay “onload”
được gắn vào một thành phần SVG cụ thể, các thuộc tính này chứa phần script sẽđược thực thi khi các sự kiện xảy ra.
• Bộ lắng nghe sự kiện (event listener), được mơ tả trong “Document Object Events” (sự kiện mơ hình đối tượng tài liệu – DOM2-EVENTS),
được định nghĩa sẽ được triệu gọi khi một sự kiện (tương ứng với sự
kiện được cho) xảy ra trên đối tượng được cho.
3.19.4 Thuộc tính sự kiện
Các thuộc tính sự kiện cĩ sẵn trên nhiều thành phần SVG.
Sau đây là danh sách các thuộc tính sự kiện trên các thành phần đồ họa và vật chứa của ngơn ngữ SVG :
147 • onfocusout • onactivate • onclick • onmousedown • onmouseup • onmouseover • onmousemove • onmouseout • onload Các thuộc tính sự kiện cấp tài liệu: • onunload • onabort • onerror • onresize • onscroll • onzoom Các thuộc tính sự kiện ảnh động : • onbegin • onend • onrepeat • onload
148
3.19.5 ECMAScript và DOM
Phần này mơ tả một số thao tác cơ bản trên cây tài liệu SVG độc lập kết hợp ECMAScript và DOM. 3.19.5.1 Lấy đối tượng tài liệu function init(evt) { if ( window.svgDocument == null ) svgDocument = evt.target.ownerDocument; } 3.19.5.2 Lấy thành phần gốc svgRoot = svgDocument.documentElement;