溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
SVG Javascript腳本是怎樣的，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。
使用JavaScript，可以編寫SVG腳本。通過腳本編寫，可以修改SVG元素，為其設置動畫或偵聽形狀上的鼠標事件。
當SVG嵌入HTML頁面中時，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫SVG腳本。通過編寫腳本，可以修改SVG元素，設置它們的動畫，或者監聽形狀上的鼠標事件。
當SVG嵌入到HTML頁面中時，可以在JavaScript中使用SVG元素，就像它們是HTML元素一樣。JavaScript看起來是一樣的。
一、SVG腳本示例
案例
單擊按鈕時，更改SVG矩形的尺寸。
<!DOCTYPE html> <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() 函數獲得對SVG形狀的引用。
例 :
var svgElement = document.getElementById("rect1");此示例獲取對ID為rect1的SVG元素的引用(ID在SVG元素的id屬性中指定)。
1. 更改屬性值
一旦獲得了SVG元素的引用，就可以使用setAttribute()函數更改其屬性。
例 ：
var svgElement = document.getElementById("rect1"); svgElement.setAttribute("width", "100");解析：
設置選定的SVG元素的width屬性。可以使用setAttribute()函數設置任何其他屬性，包括 style屬性。還可以使用getAttribute() 函數獲取屬性的值。
例 ：
var svgElement = document.getElementById("rect1"); var width = svgElement.getAttribute("width");2. 更改CSS屬性
通過SVG元素的style屬性引用給定的CSS屬性，可以更改SVG元素的CSS屬性。
下面是一個設置stroke CSS屬性的示例：
var svgElement = document.getElementById("rect1"); svgElement.style.stroke = "#ff0000";注：
也可以通過這種方式設置任何其他CSS屬性。只需將其名稱放在svgElement.style. 上面第二行的后面，然后將其設置為某種值即可。
還可以通過style屬性讀取CSS屬性的值。
例 ：
讀取stroke CSS屬性的值。
var svgElement = document.getElementById("rect1"); var stroke = svgElement.style.stroke;解析：
名稱中包含短劃線的CSS屬性名稱(例如stroke-width)需要通過['']構造進行引用。這樣做是因為帶有短劃線的屬性名稱在JavaScript中無效。
因此你不能寫。
element.style.stroke-width
相反，你必須寫。
element.style['stroke-width']
這樣，還可以使用名稱中的破折號來引用CSS屬性。
三、事件監聽器
可以根據需要直接在SVG中將事件監聽器添加到SVG形狀中。就像使用HTML元素一樣進行操作。
這是一個添加onmouseover 和 onmouseout事件監聽器。
例：
<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>
此示例在鼠標懸停在矩形上時更改筆觸顏色和筆觸寬度，并在鼠標離開矩形時重置筆觸顏色和筆觸寬度。可以嘗試下面的示例。嘗試將鼠標移到形狀上，然后再次移出，以查看事件監聽器的效果。
還可以使用addEventListener() 函數將事件監聽器附加到SVG元素。
例：
var svgElement = document.getElementById("rect1"); svgElement.addEventListener("mouseover", mouseOver); function mouseOver() { alert("event fired!"); }此示例將名為MouseOver的事件監聽器函數添加到MouseOver事件。這意味著，只要用戶將鼠標懸停在SVG元素上，就會調用事件監聽器函數。
這里基于SVG基礎，介紹了SVG中 javascript腳本的應用。通過ID獲取對SVG元素的引用，通過改變屬性值，改變CSSS屬性每一個知識點都通過項目進行詳細的講解。最后通過一個小項目，介紹了事件監聽器的應用。
看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
