一篇文章帶你了解SVG javascript腳本
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
使用JavaScript，可以編寫SVG腳本。通過腳本編寫，可以修改SVG元素，為其設(shè)置動畫或偵聽形狀上的鼠標(biāo)事件。
當(dāng)SVG嵌入HTML頁面中時，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫SVG腳本。通過編寫腳本，可以修改SVG元素，設(shè)置它們的動畫，或者監(jiān)聽形狀上的鼠標(biāo)事件。
當(dāng)SVG嵌入到HTML頁面中時，可以在JavaScript中使用SVG元素，就像它們是HTML元素一樣。JavaScript看起來是一樣的。
一、SVG腳本示例
案例
單擊按鈕時，更改SVG矩形的尺寸。
<html><head><meta charset="utf-8"><title>項目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>
運行效果：
二、通過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屬性。可以使用setAttribute()函數(shù)設(shè)置任何其他屬性，包括 style屬性。還可以使用getAttribute() 函數(shù)獲取屬性的值。
例 ：
var svgElement = document.getElementById("rect1");var width = svgElement.getAttribute("width");
2. 更改CSS屬性
通過SVG元素的style屬性引用給定的CSS屬性，可以更改SVG元素的CSS屬性。
下面是一個設(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)造進行引用。這樣做是因為帶有短劃線的屬性名稱在JavaScript中無效。
因此你不能寫。
element.style.stroke-width相反，你必須寫。
element.style['stroke-width']這樣，還可以使用名稱中的破折號來引用CSS屬性。
三、事件監(jiān)聽器
可以根據(jù)需要直接在SVG中將事件監(jiān)聽器添加到SVG形狀中。就像使用HTML元素一樣進行操作。
這是一個添加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)懸停在矩形上時更改筆觸顏色和筆觸寬度，并在鼠標(biāo)離開矩形時重置筆觸顏色和筆觸寬度。可以嘗試下面的示例。嘗試將鼠標(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屬性每一個知識點都通過項目進行詳細(xì)的講解。最后通過一個小項目，介紹了事件監(jiān)聽器的應(yīng)用。
歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
代碼很簡單，希望對你學(xué)習(xí)有幫助。
-------------------?End?-------------------
往期精彩文章推薦：
歡迎大家點贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請在后臺回復(fù)【入群】
萬水千山總是情，點個【在看】行不行