可缩放矢量图形（英语：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>
运行结果如下：
