本實例展示如何在SVG中畫出一個正方形並使之旋轉。運行結果如下圖所示：
在文本框中輸入時間間隔，單位是毫秒。點擊Start按鈕，藍色方塊就會開始轉動，每個時間間隔變化一度。變換的角度在下面的Angle處顯示。
實現代碼如下，技術要點已經詳細注釋。
<!DOCTYPE html> <?xml version="1.0" ?> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> </head> <body> <!-- <svg>標簽聲明一個svg畫布長40px寬40px --> <svg width="40px" height="40px" style="border:1px solid black"> <!-- <g>標簽可以包含多個圖形合成一個組，並對組里的圖形進行統一處理。transform="translate(20,20)"表示在<g>里的所有圖形都會向下向右平移20px --> <g transform="translate(20,20)" id="myImage"> <!-- <rect>可以在畫布上畫出一個長方形，此長方形長寬都是20px，圖形中心在(-10,-10)處，但經過<g>的變換會落在(10,10)處。顏色是藍色 --> <rect id="mySquare" x="-10" y="-10" width="20" height="20" fill="blue" /> </g> </svg> <br/> <input id="speed" type="text" value="10" /> <button id="zoom" onclick="startAnimation();">Start</button> <p id="angle"></p> <script> var squareShape; function startAnimation() { //squareShape是要轉動的那個正方形 squareShape = document.getElementById("mySquare"); //初始轉角為0 squareShape.currentTheta = 0; //setInterval函數可以無限循環執行某個函數，第一個參數是要執行的函數名，第二個參數是時間間隔，單位毫秒。 setInterval("animateImage()",speed.value); } //轉動正方形 function animateImage() { //正方形的transform屬性是對圖形進行變換，rotate(x)表示對圖形旋轉x度 squareShape.setAttribute("transform", "rotate(" + squareShape.currentTheta + ")"); squareShape.currentTheta += 1; //顯示旋轉的度數 document.getElementById("angle").innerText = "Angle:" + squareShape.currentTheta; } </script> </body> </html>