SVG Javascript腳本是怎樣的，很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機(jī)版的企業(yè)網(wǎng)站。實(shí)現(xiàn)跨屏營(yíng)銷(xiāo)，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動(dòng)網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營(yíng)銷(xiāo)需求！創(chuàng)新互聯(lián)公司具備承接各種類型的成都做網(wǎng)站、成都網(wǎng)站制作項(xiàng)目的能力。經(jīng)過(guò)十載的努力的開(kāi)拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評(píng)。

使用JavaScript，可以編寫(xiě)SVG腳本。通過(guò)腳本編寫(xiě)，可以修改SVG元素，為其設(shè)置動(dòng)畫(huà)或偵聽(tīng)形狀上的鼠標(biāo)事件。

當(dāng)SVG嵌入HTML頁(yè)面中時(shí)，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫(xiě)SVG腳本。通過(guò)編寫(xiě)腳本，可以修改SVG元素，設(shè)置它們的動(dòng)畫(huà)，或者監(jiān)聽(tīng)形狀上的鼠標(biāo)事件。

當(dāng)SVG嵌入到HTML頁(yè)面中時(shí)，可以在JavaScript中使用SVG元素，就像它們是HTML元素一樣。JavaScript看起來(lái)是一樣的。

一、SVG腳本示例

案例

單擊按鈕時(shí)，更改SVG矩形的尺寸。

運(yùn)行效果：

二、通過(guò)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屬性

通過(guò)SVG元素的style屬性引用給定的CSS屬性，可以更改SVG元素的CSS屬性。

下面是一個(gè)設(shè)置stroke CSS屬性的示例：

var svgElement = document.getElementById("rect1");  svgElement.style.stroke = "#ff0000";

注：

也可以通過(guò)這種方式設(shè)置任何其他CSS屬性。只需將其名稱放在svgElement.style. 上面第二行的后面，然后將其設(shè)置為某種值即可。

還可以通過(guò)style屬性讀取CSS屬性的值。

例：

讀取stroke CSS屬性的值。

var svgElement = document.getElementById("rect1");  var stroke = svgElement.style.stroke;

解析：

名稱中包含短劃線的CSS屬性名稱(例如stroke-width)需要通過(guò)['']構(gòu)造進(jìn)行引用。這樣做是因?yàn)閹в卸虅澗€的屬性名稱在JavaScript中無(wú)效。

因此你不能寫(xiě)。

element.style.stroke-width

相反，你必須寫(xiě)。

element.style['stroke-width']

這樣，還可以使用名稱中的破折號(hào)來(lái)引用CSS屬性。

三、事件監(jiān)聽(tīng)器

可以根據(jù)需要直接在SVG中將事件監(jiān)聽(tīng)器添加到SVG形狀中。就像使用HTML元素一樣進(jìn)行操作。

這是一個(gè)添加onmouseover 和 onmouseout事件監(jiān)聽(tīng)器。

例：

此示例在鼠標(biāo)懸停在矩形上時(shí)更改筆觸顏色和筆觸寬度，并在鼠標(biāo)離開(kāi)矩形時(shí)重置筆觸顏色和筆觸寬度?？梢試L試下面的示例。嘗試將鼠標(biāo)移到形狀上，然后再次移出，以查看事件監(jiān)聽(tīng)器的效果。

還可以使用addEventListener() 函數(shù)將事件監(jiān)聽(tīng)器附加到SVG元素。

例：

var svgElement = document.getElementById("rect1"); svgElement.addEventListener("mouseover", mouseOver);   function mouseOver() {     alert("event fired!"); }

此示例將名為MouseOver的事件監(jiān)聽(tīng)器函數(shù)添加到MouseOver事件。這意味著，只要用戶將鼠標(biāo)懸停在SVG元素上，就會(huì)調(diào)用事件監(jiān)聽(tīng)器函數(shù)。

這里基于SVG基礎(chǔ)，介紹了SVG中  javascript腳本的應(yīng)用。通過(guò)ID獲取對(duì)SVG元素的引用，通過(guò)改變屬性值，改變CSSS屬性每一個(gè)知識(shí)點(diǎn)都通過(guò)項(xiàng)目進(jìn)行詳細(xì)的講解。最后通過(guò)一個(gè)小項(xiàng)目，介紹了事件監(jiān)聽(tīng)器的應(yīng)用。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。