使用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看起來是一樣的。
本文向您展示了如何通過JavaScript處理SVG元素的示例，但并未解釋JavaScript本身。要理解本文中的示例，您需要已經(jīng)對JavaScript有一定的了解。
這是一個簡單的SVG腳本編寫示例，當(dāng)單擊按鈕時，該示例會更改SVG矩形的尺寸。
<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>測試看看?/?嘗試單擊按鈕以查看會發(fā)生什么。
您可以使用document.getElementById() 函數(shù)獲得對SVG形狀的引用。這是一個示例：
var svgElement = document.getElementById("rect1");此示例獲取對ID為rect1的SVG元素的引用(ID在SVG元素的id屬性中指定)。
一旦獲得了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");通過SVG元素的style屬性引用給定的CSS屬性，可以更改SVG元素的CSS屬性。下面是一個設(shè)置stroke CSS屬性的示例：
var svgElement = document.getElementById("rect1");
svgElement.style.stroke = "#ff0000";您也可以通過這種方式設(shè)置任何其他CSS屬性。只需將其名稱放在svgElement.style. 上面第二行的后面，然后將其設(shè)置為某種值即可。
您還可以通過style屬性讀取CSS屬性的值。這是一個示例：
var svgElement = document.getElementById("rect1");
var stroke = svgElement.style.stroke;本示例讀取stroke CSS屬性的值。
名稱中包含短劃線的CSS屬性名稱（例如stroke-width）需要通過['']構(gòu)造進(jìn)行引用。這樣做是因?yàn)閹в卸虅澗€的屬性名稱在JavaScript中無效。因此你不能寫
element.style.stroke-width
相反，你必須寫
element.style['stroke-width']
這樣，您還可以使用名稱中的破折號來引用CSS屬性。
您可以根據(jù)需要直接在SVG中將事件監(jiān)聽器添加到SVG形狀中。就像使用HTML元素一樣進(jìn)行操作。這是一個添加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ù)。
為了使SVG形狀具有動畫效果，您需要重復(fù)調(diào)用JavaScript函數(shù)。 該函數(shù)用于更改形狀的位置或尺寸。 當(dāng)函數(shù)被重復(fù)調(diào)用并且間隔非常短時，形狀的位置或尺寸也將以非常短的間隔更新，這會使形狀看起來像動畫一樣。
這是SVG腳本動畫示例。示例下面顯示了創(chuàng)建它的代碼。單擊SVG圖像下方的兩個按鈕以開始和停止動畫。
這是生成上述動畫所需的代碼：
<svg width="500" height="100">
<circle id="circle1" cx="20" cy="20" r="10"
style="stroke: none; fill: #ff0000;"/>
</svg>
<script>
var timerFunction = null;
function startAnimation() {
if(timerFunction == null) {
timerFunction = setInterval(animate, 20);
}
}
function stopAnimation() {
if(timerFunction != null){
clearInterval(timerFunction);
timerFunction = null;
}
}
function animate() {
var circle = document.getElementById("circle1");
var x = circle.getAttribute("cx");
var newX = 2 + parseInt(x);
if(newX > 500) {
newX = 20;
}
circle.setAttribute("cx", newX);
}
</script>
<br/>
<input type="button" value="開始動畫" onclick="startAnimation();">
<input type="button" value="停止動畫" onclick="stopAnimation();">測試看看?/?這兩個HTML按鈕都附加了一個onclick監(jiān)聽器。 這些監(jiān)聽器調(diào)用startAnimation()和stopAnimation()函數(shù)，用于啟動和停止動畫。 動畫通過設(shè)置計(jì)時器開始，該計(jì)時器每隔20毫秒調(diào)用Animate()函數(shù)。 再次清除此計(jì)時器功能可停止動畫。
動畫在animate()函數(shù)內(nèi)部執(zhí)行。 首先，該函數(shù)通過document.getElementById()函數(shù)獲得對SVG圖像中<circle>元素的引用。 然后，讀取圓的cx屬性并將其轉(zhuǎn)換為數(shù)字。 然后將2加到cx值。 如果新的x值大于500，則將其重置為20。最后，將新的x值放回到<circle>元素的cx屬性中。 圓因此移動到新的x位置。