html --- SVG --- javascript --- 旋转矩形

可缩放矢量图形英语:Scalable Vector GraphicsSVG)是基于可扩展标记语言(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>

 

 

 

 

 运行结果如下:

html --- SVG --- javascript --- 旋转矩形

 

 

 

 

 

 

你可能感兴趣的:(html --- SVG --- javascript --- 旋转矩形)