可缩放矢量图形(英语:Scalable Vector Graphics,SVG)是基于可扩展标记语言(XML),
用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。
在 Internet Explorer 10(Quirks 和 IE10 文档模式)中,矢量标记语言 (VML) 已过时。
如有疑问请参考:http://msdn.microsoft.com/zh-cn/library/ie/hh801223
更多疑问请参考:http://zh.wikipedia.org/wiki/SVG
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旋转矩形</title> <script> // Global variables. // Define SVG namespace. var svgNS = "http://www.w3.org/2000/svg"; // Placeholder for parent SVG element to be created. var mySvg; // Placeholder for rectangle object to be created. var myRect; // Flag to stop rectangle spinning. var spin; // Initial angle to start rotation from. var myAngle = 0; // Values of center of rotation. var myX = 250; var myY = 150; // Make Rectangle. function makeRect() { if(document.getElementsByTagNameNS(svgNS, "svg").length != 0 ) return; /* * createElementNS() 方法可创建带有指定命名空间的元素节点 * setAttributeNS() 方法创建或改变具有命名空间的属性 */ // Create parent SVG element with width and height. mySvg = document.createElementNS(svgNS,"svg"); mySvg.setAttributeNS(null,"width", "800px"); mySvg.setAttributeNS(null,"height", "450px"); // Create rectangle element from SVG namespace. myRect = document.createElementNS(svgNS,"rect"); // Set rectangle's attributes. myRect.setAttributeNS(null,"width","145px"); myRect.setAttributeNS(null,"height","90px"); myRect.setAttributeNS(null,"x","200px"); myRect.setAttributeNS(null,"y","100px"); myRect.setAttributeNS(null,"fill","lightcoral"); myRect.setAttributeNS(null,"stroke","deepskyblue"); myRect.setAttributeNS(null,"stroke-width","5px"); // Append rectangle to the parent SVG element. // Append parent SVG element to the div node. mySvg.appendChild(myRect); document.getElementById("myAnchor").appendChild(mySvg); } // Do the rotation every 10 milliseconds until cancelled. function rotateRect() { spin = setInterval("spinRect()", 10); } // Spin rectangle by 5 degrees. function spinRect() { // Rotation is a subset of the transform attribute. // Note the use of quotes and plus signs with variables in SVG attribute call. myRect.setAttributeNS(null,"transform","rotate(" + myAngle + "," + myX + "," + myY + ")"); myAngle += 5; } </script> </head> <body> <br><br> <!-- Button to create rectangle. --> <input type="BUTTON" value="Make Rectangle" onclick="makeRect()"> <!-- Button to rotate rectangle. --> <input type="BUTTON" value="Rotate Rectangle" onclick="rotateRect()"> <!-- Button to close webpage with spin variable. --> <!-- clearInterval() 方法可取消由 setInterval() 设置的 timeout。 clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。--> <input type="BUTTON" value="Stop!" onclick="clearInterval(spin)"> <br><br> <!-- The rectangle will be attached to the document here. --> <div id="myAnchor"></div> </body> </html>
运行结果如下: