一篇文章帶你了解SVG Javascript腳本
使用JavaScript，可以編寫SVG腳本。通過腳本編寫，可以修改SVG元素，為其設(shè)置動畫或偵聽形狀上的鼠標(biāo)事件。
當(dāng)SVG嵌入HTML頁面中時(shí)，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫SVG腳本。通過編寫腳本，可以修改SVG元素，設(shè)置它們的動畫，或者監(jiān)聽形狀上的鼠標(biāo)事件。
當(dāng)SVG嵌入到HTML頁面中時(shí)，可以在JavaScript中使用SVG元素，就像它們是HTML元素一樣。JavaScript看起來是一樣的。
一、SVG腳本示例
案例
單擊按鈕時(shí)，更改SVG矩形的尺寸。
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>項(xiàng)目</title>
- </head>
- <body style="background-color: aqua;">
- <svg width="500" height="100">
- <rect id="rect1" x="10" y="10" width="50" height="80" style="stroke:#000000; fill:none;" />
- </svg>
- <input id="button1" type="button" value="Change Dimensions" onclick="changeDimensions()" />
- <script>
- function changeDimensions() {
- document.getElementById("rect1").setAttribute("width", "100");
- }
- </script>
- </body>
- </html>
運(yùn)行效果：
二、通過ID獲取SVG元素的引用
可以使用document.getElementById() 函數(shù)獲得對SVG形狀的引用。
例 :
- var svgElement = document.getElementById("rect1");
此示例獲取對ID為rect1的SVG元素的引用(ID在SVG元素的id屬性中指定)。
1. 更改屬性值
一旦獲得了SVG元素的引用，就可以使用setAttribute()函數(shù)更改其屬性。
例 ：
- var svgElement = document.getElementById("rect1");
- svgElement.setAttribute("width", "100");
解析：
設(shè)置選定的SVG元素的width屬性?？梢允褂胹etAttribute()函數(shù)設(shè)置任何其他屬性，包括 style屬性。還可以使用getAttribute() 函數(shù)獲取屬性的值。
例 ：
- var svgElement = document.getElementById("rect1");
- var width = svgElement.getAttribute("width");
2. 更改CSS屬性
通過SVG元素的style屬性引用給定的CSS屬性，可以更改SVG元素的CSS屬性。
下面是一個(gè)設(shè)置stroke CSS屬性的示例：
- var svgElement = document.getElementById("rect1");
- svgElement.style.stroke = "#ff0000";
注：
也可以通過這種方式設(shè)置任何其他CSS屬性。只需將其名稱放在svgElement.style. 上面第二行的后面，然后將其設(shè)置為某種值即可。
還可以通過style屬性讀取CSS屬性的值。
例 ：
讀取stroke CSS屬性的值。
- var svgElement = document.getElementById("rect1");
- var stroke = svgElement.style.stroke;
解析：
名稱中包含短劃線的CSS屬性名稱(例如stroke-width)需要通過['']構(gòu)造進(jìn)行引用。這樣做是因?yàn)閹в卸虅澗€的屬性名稱在JavaScript中無效。
因此你不能寫。
- element.style.stroke-width
相反，你必須寫。
- element.style['stroke-width']
這樣，還可以使用名稱中的破折號來引用CSS屬性。
三、事件監(jiān)聽器
可以根據(jù)需要直接在SVG中將事件監(jiān)聽器添加到SVG形狀中。就像使用HTML元素一樣進(jìn)行操作。
這是一個(gè)添加onmouseover 和 onmouseout事件監(jiān)聽器。
例：
- <svg width="500" height="100">
- <rect x="10" y="10" width="100" height="75" style="stroke: #000000; fill: #eeeeee;" onmouseover="this.style.stroke = '#ff0000'; this.style['stroke-width'] = 5;"
- onmouseout="this.style.stroke = '#000000'; this.style['stroke-width'] = 1;" />
- </svg>
此示例在鼠標(biāo)懸停在矩形上時(shí)更改筆觸顏色和筆觸寬度，并在鼠標(biāo)離開矩形時(shí)重置筆觸顏色和筆觸寬度。可以嘗試下面的示例。嘗試將鼠標(biāo)移到形狀上，然后再次移出，以查看事件監(jiān)聽器的效果。
還可以使用addEventListener() 函數(shù)將事件監(jiān)聽器附加到SVG元素。
例：
- var svgElement = document.getElementById("rect1");
- svgElement.addEventListener("mouseover", mouseOver);
- function mouseOver() {
- alert("event fired!");
- }
此示例將名為MouseOver的事件監(jiān)聽器函數(shù)添加到MouseOver事件。這意味著，只要用戶將鼠標(biāo)懸停在SVG元素上，就會調(diào)用事件監(jiān)聽器函數(shù)。
四、總結(jié)
本文基于SVG基礎(chǔ)，介紹了SVG中 javascript腳本的應(yīng)用。通過ID獲取對SVG元素的引用，通過改變屬性值，改變CSSS屬性每一個(gè)知識點(diǎn)都通過項(xiàng)目進(jìn)行詳細(xì)的講解。最后通過一個(gè)小項(xiàng)目，介紹了事件監(jiān)聽器的應(yīng)用。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時(shí)候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
