SVG教學 » SVG指令碼(JavaScript)

SVG指令碼(JavaScript)

使用JavaScript，可以編寫SVG指令碼。 通過指令碼，您可以修改SVG元素，為它們設定動畫或在形狀上監聽滑鼠事件。

當SVG嵌入到HTML頁面中時，可以在JavaScript中使用SVG元素。

範例

<!DOCTYPE html>  
<html>  
<body>  
<svg width="500" height="150">  

<rect id="rect1" x="20" y="20" width="70" height="80"  
       style="stroke: black; stroke-width: 2; fill:purple; fill-opacity: .5;"/>  
</svg>  
<input id="button1" type="button" value="Change Dimensions"  
            onclick="changeDimensions()"/>  

<script>  
    function changeDimensions() {  
        document.getElementById("rect1").setAttribute("width", "120");  
        document.getElementById("rect1").setAttribute("height", "100");  
    }  
</script>  
</body>  
</html>

說明:

  • 使用document.getElementById()函式，可以獲得對SVG形狀的參照。
  • setAttribute()函式用於更改屬性的值。

執行上面範例程式碼，得到以下結果 -