143
Xác định kiểu ngơn ngữ viết script mặc định cho tài liệu cho trước.
Thuộc tính này thiết lập ngơn ngữ viết script được dùng để xử lý các “chuỗi giá trị trong thuộc tính sự kiện (event attributes)”. Giá trị content-type chỉ định một kiểu phương tiện (media type). Giá trị mặc
định là “text/ecmascript” (tại thời điểm cơng bố, “text/ecmascript”
chưa được đăng kí là một loại phương tiện cho ECMAScript ). Giá trị này sẽ là giá trị mặc định cho tới khi cĩ một giá trị thay thế khác được
đăng kí.
3.19.1.2 Khai báo cục bộ ngơn ngữ viết script
Chúng ta cĩ thể chỉ định ngơn ngữ đặc tả cho mỗi thành phần ‘script’ riêng
biệt bằng thuộc tính ‘type’ trên thành phần ‘script’.
3.19.2 Thành phần ‘script’
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”