可缩放矢量图形（英语：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>

运行结果如下：

html --- SVG --- javascript --- 旋转矩形的更多相关文章

  1. html --- VML --- javascript --- 旋转矩形

    矢量标记语言 --- Vector Markup Language 运行它的代码需要打开IE的兼容性视图 如有疑问请参考:http://msdn.microsoft.com/en-us/library ...

  2. cocos2d 判断旋转矩形是否包含某个点

    本来想画个图演示一下,但是折腾了一会发现画不好,我的win10系统没有安装office,以后再看的话再补上吧.不废话了. 如图所以,如果判断点P是否被矩形A所包含,非常容易.那么如果矩形A以中心点逆时 ...

  3. css3+javascript旋转的3d盒子

    今天写点css3,3d属性写的3d盒子,结合javascript让盒子随鼠标旋转起来 今天带了css3新属性3d <!DOCTYPE html> <html> <head ...

  4. 旋转矩形碰撞检测 OBB方向包围盒算法

    在cocos2dx中进行矩形的碰撞检测时需要对旋转过的矩形做碰撞检查,由于游戏没有使用Box2D等物理引擎,所以采用了OBB(Oriented bounding box)方向包围盒算法,这个算法是基于 ...

  5. RotateRect(旋转矩形)的倾斜旋转变换矫正

    在Opencv中的图像处理中,经常要用到minAreaRect()函数求最小外接矩形,该函数的返回值就是一个RotatedRect类对象. RotatedRect类定义如下: class CV_EXP ...

  6. javascript中矩形的碰撞检测---- 计算碰撞部分的面积

    今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积. 这应该不是最合适 ...

  7. opencv HSV找颜色，找轮廓用最小旋转矩形框出

    #include <opencv2/opencv.hpp> #include<iostream> #include<string> using namespace ...

  8. SVG基础以及使用Javascript DOM操作SVG

    SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...

  9. 矩形旋转碰撞,OBB方向包围盒算法实现

    怎样进行2D旋转矩形的碰撞检測.能够使用一种叫OBB的检測算法(Oriented bounding box)方向包围盒.这个算法是基于SAT(Separating Axis Theorem)分离轴定律 ...

随机推荐

  1. CentOS下如何查找大文件

    在Windows系统中,我们可以使用TreeSize工具查找一些大文件或文件夹,非常的方便高效,在Linux系统中,如何去搜索一些比较大的文件呢?下面我整理了一下在Linux系统中如何查找大文件或文件 ...

  2. swift:用UITabBarController、UINavigationController、模态窗口简单的搭建一个QQ界面

    搭建一个QQ界面其实是一个很简单的实现,需要几种切换视图的控制器组合一起使用,即导航控制器.标签栏控制器.模态窗口.其中,将标签栏控制器设置为window的rootViewController,因为Q ...

  3. exploring the http Object

    form.html <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset=&q ...

  4. lib-qqwry v1.0 发布 nodejs解析纯真IP库(qqwry.dat)

    lib-qqwry是当初学习node时用来练手的一个模块,用来解析纯真IP库的 现在发一个v1.0版本弥补我当时稚嫩的代码. 意外收获是,整理代码后发现,相比v0.x版本 急速模式下的效率提升大概20 ...

  5. 11.cadence.通孔类封装创建[原创]

    1.打开Pad Designer ---- ----- ---- ---- OK ------- ---- 回到Pad Designer internal:不管是几层板,中间层用这个就可以了: --- ...

  6. 1.Cadence16.5的安装教程[原创]

    http://jingyan.baidu.com/article/6d704a1319107a28db51cac9.html

  7. asp开发微信扫码支付

    这个任务已经给了.现在正在学习开发中.主要注意的是2点. 1:返回参数的验证. 2:通知后业务处理和处理后返回财付通.大部分操作,api中已经处理好. 现在需要的业务逻辑部分. 需要正确3个参数  r ...

  8. BZOJ 2743 采花（树状数组）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2743 题意:给出一个数列,每个询问查询[L,R]中至少出现两次的数字有多少种? 思路:(1 ...

  9. SQL[连载2]语法及相关实例

    SQL[连载2]语法及相关实例 SQL语法 数据库表 一个数据库通常包含一个或多个表.每个表由一个名字标识(例如:"Websites"),表包含带有数据的记录(行). 在本教程中, ...

  10. 用java在mysql中随机插入9000 000条数据

    package query; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; ...