一篇文章帶你了解SVG JavaScript腳本
當(dāng)SVG嵌入HTML頁面中時(shí)，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫SVG腳本。通過編寫腳本，可以修改SVG元素，設(shè)置它們的動(dòng)畫，或者監(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ù)獲得對(duì)SVG形狀的引用。
例 :
var svgElement = document.getElementById("rect1");
此示例獲取對(duì)ID為rect1的SVG元素的引用(ID在SVG元素的id屬性中指定)。
1. 更改屬性值
一旦獲得了SVG元素的引用，就可以使用setAttribute()函數(shù)更改其屬性。
例 ：
var svgElement = document.getElementById("rect1");
svgElement.setAttribute("width", "100");
解析：
設(shè)置選定的SVG元素的width屬性。可以使用setAttribute()函數(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']
這樣，還可以使用名稱中的破折號(hào)來引用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元素上，就會(huì)調(diào)用事件監(jiān)聽器函數(shù)。
四、總結(jié)
本文基于SVG基礎(chǔ)，介紹了SVG中 javascript腳本的應(yīng)用。通過ID獲取對(duì)SVG元素的引用，通過改變屬性值，改變CSSS屬性每一個(gè)知識(shí)點(diǎn)都通過項(xiàng)目進(jìn)行詳細(xì)的講解。最后通過一個(gè)小項(xiàng)目，介紹了事件監(jiān)聽器的應(yīng)用。
歡迎大家積極嘗試，有時(shí)候看到別人實(shí)現(xiàn)起來很簡(jiǎn)單，但是到自己動(dòng)手實(shí)現(xiàn)的時(shí)候，總會(huì)有各種各樣的問題，切勿眼高手低，勤動(dòng)手，才可以理解的更加深刻。
代碼很簡(jiǎn)單，希望對(duì)你學(xué)習(xí)有幫助。
