建站
咨詢
售后
建站咨詢
新聞中心
當(dāng)SVG嵌入到HTML頁面中時，可以在JavaScript中使用SVG元素，就像它們是HTML元素一樣。JavaScript看起來是一樣的。
一、SVG腳本示例
案例
單擊按鈕時，更改SVG矩形的尺寸。
項目
運行效果：
二、通過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屬性。
下面是一個設(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)聽器。
例：
此示例在鼠標(biāo)懸停在矩形上時更改筆觸顏色和筆觸寬度，并在鼠標(biāo)離開矩形時重置筆觸顏色和筆觸寬度?？梢試L試下面的示例。嘗試將鼠標(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í)有幫助。
標(biāo)題名稱：一篇文章帶你了解SVGJavaScript腳本
轉(zhuǎn)載注明：http://m.5511xx.com/article/dhspghs.html
