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

时间:2022-09-14 17:28:59

可缩放矢量图形英语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 --- 旋转矩形