一篇文章帶你了解SVG Javascript腳本

作者：前端進階者 2020-12-23 08:12:08

開發(fā) 前端

使用JavaScript，可以編寫SVG腳本。通過腳本編寫，可以修改SVG元素，為其設(shè)置動畫或偵聽形狀上的鼠標事件。

[[359424]]

使用JavaScript，可以編寫SVG腳本。通過腳本編寫，可以修改SVG元素，為其設(shè)置動畫或偵聽形狀上的鼠標事件。

當SVG嵌入HTML頁面中時，可以在JavaScript中使用SVG元素，可以使用JavaScript編寫SVG腳本。通過編寫腳本，可以修改SVG元素，設(shè)置它們的動畫，或者監(jiān)聽形狀上的鼠標事件。

當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() 函數(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>

此示例在鼠標懸停在矩形上時更改筆觸顏色和筆觸寬度，并在鼠標離開矩形時重置筆觸顏色和筆觸寬度。可以嘗試下面的示例。嘗試將鼠標移到形狀上，然后再次移出，以查看事件監(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事件。這意味著，只要用戶將鼠標懸停在SVG元素上，就會調(diào)用事件監(jiān)聽器函數(shù)。

四、總結(jié)

本文基于SVG基礎(chǔ)，介紹了SVG中 javascript腳本的應(yīng)用。通過ID獲取對SVG元素的引用，通過改變屬性值，改變CSSS屬性每一個知識點都通過項目進行詳細的講解。最后通過一個小項目，介紹了事件監(jiān)聽器的應(yīng)用。

歡迎大家積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

責任編輯：姜華來源：前端進階學習交流