鍍金池/ 教程/ HTML/ SVG腳本(JavaScript)
SVG鏈接
SVG陰影效果
SVG線性漸變
SVG文本
SVG平面陰影
SVG圖表
SVG交互
SVG時(shí)鐘
SVG漸變
SVG <pattern>元素
SVG簡(jiǎn)介
SVG徑向漸變
SVG <filter>元素
SVG對(duì)話框效果
SVG形狀
SVG stroke屬性
SVG圖形
SVG教程
SVG事件監(jiān)聽器
SVG加載器示例
SVG腳本(JavaScript)
SVG圖標(biāo)
SVG拖動(dòng)
SVG模糊效果

SVG腳本(JavaScript)

使用JavaScript，可以編寫SVG腳本。 通過腳本，您可以修改SVG元素，為它們?cè)O(shè)置動(dòng)畫或在形狀上監(jiān)聽鼠標(biāo)事件。

當(dāng)SVG嵌入到HTML頁(yè)面中時(shí)，可以在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>

說(shuō)明:

  • 使用document.getElementById()函數(shù)，可以獲得對(duì)SVG形狀的引用。
  • setAttribute()函數(shù)用于更改屬性的值。

執(zhí)行上面示例代碼，得到以下結(jié)果 -


上一篇：SVG線性漸變下一篇：SVG形狀