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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>旋转矩形</title>
  6.     <script>
  7.         // Global variables.
  8.         // Define SVG namespace.
  9.         var svgNS = "http://www.w3.org/2000/svg";
  10.         // Placeholder for parent SVG element to be created.
  11.         var mySvg;
  12.         // Placeholder for rectangle object to be created.
  13.         var myRect;
  14.         // Flag to stop rectangle spinning.
  15.         var spin;
  16.         // Initial angle to start rotation from.
  17.         var myAngle = 0;
  18.         // Values of center of rotation.
  19.         var myX = 250;
  20.         var myY = 150;
  21.  
  22.         // Make Rectangle.
  23.         function makeRect() {
  24.  
  25.             if(document.getElementsByTagNameNS(svgNS, "svg").length != 0 )
  26.                 return;
  27.             /*
  28.              * createElementNS() 方法可创建带有指定命名空间的元素节点
  29.              * setAttributeNS()  方法创建或改变具有命名空间的属性
  30.              */
  31.             // Create parent SVG element with width and height.
  32.             mySvg = document.createElementNS(svgNS,"svg");
  33.             mySvg.setAttributeNS(null,"width", "800px");
  34.             mySvg.setAttributeNS(null,"height", "450px");
  35.  
  36.             // Create rectangle element from SVG namespace.
  37.             myRect = document.createElementNS(svgNS,"rect");
  38.             // Set rectangle's attributes.
  39.             myRect.setAttributeNS(null,"width","145px");
  40.             myRect.setAttributeNS(null,"height","90px");
  41.             myRect.setAttributeNS(null,"x","200px");
  42.             myRect.setAttributeNS(null,"y","100px");
  43.             myRect.setAttributeNS(null,"fill","lightcoral");
  44.             myRect.setAttributeNS(null,"stroke","deepskyblue");
  45.             myRect.setAttributeNS(null,"stroke-width","5px");
  46.  
  47.             // Append rectangle to the parent SVG element.
  48.             // Append parent SVG element to the div node.
  49.             mySvg.appendChild(myRect);
  50.             document.getElementById("myAnchor").appendChild(mySvg);
  51.         }
  52.  
  53.         // Do the rotation every 10 milliseconds until cancelled.
  54.         function rotateRect() {
  55.             spin = setInterval("spinRect()", 10);
  56.         }
  57.         // Spin rectangle by 5 degrees.
  58.         function spinRect() {
  59.             // Rotation is a subset of the transform attribute.
  60.             // Note the use of quotes and plus signs with variables in SVG attribute call.
  61.             myRect.setAttributeNS(null,"transform","rotate(" + myAngle + "," + myX + "," + myY + ")");
  62.             myAngle += 5;
  63.         }
  64.     </script>
  65. </head>
  66. <body>
  67.  
  68. <br><br>
  69.  
  70. <!-- Button to create rectangle. -->
  71. <input type="BUTTON" value="Make Rectangle" onclick="makeRect()">
  72.  
  73. <!-- Button to rotate rectangle. -->
  74. <input type="BUTTON" value="Rotate Rectangle" onclick="rotateRect()">
  75.  
  76. <!-- Button to close webpage with spin variable. -->
  77. <!-- clearInterval() 方法可取消由 setInterval() 设置的 timeout。
  78.      clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。-->
  79. <input type="BUTTON" value="Stop!" onclick="clearInterval(spin)">
  80.  
  81. <br><br>
  82.  
  83. <!-- The rectangle will be attached to the document here. -->
  84. <div id="myAnchor"></div>
  85.  
  86. </body>
  87. </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. Hadoop、Pig、Hive、Storm、NOSQL 学习资源收集

    (一)hadoop 相关安装部署 1.hadoop在windows cygwin下的部署: http://lib.open-open.com/view/1333428291655 http://blo ...

  2. Getting Started with Mongoose and Node.js – A Sample Comments System | Dev Notes

    In this post, we’re going to be creating a sample comments system using Node, Express and Mongoose.  ...

  3. How to fix broken packages?（转）

    Try Code: sudo apt-get update to update your package list.Then Code: sudo apt-get autoclean to clean ...

  4. Ubuntu下搭建java开发环境

    JDK安装: 1. 在http://www.oracle.com/technetwork/java/javase/downloads/index.html上下载相应版本的JDK环境,这里我使用的是jd ...

  5. iPhone 屏幕上的 Home 键在哪里？（已解决）

    「问」:iPhone屏幕上的Home键如何开启? 「答」:在[设置]-[通用]-[辅助功能]-[AssistiveTouch],打开即可.不需要下载什么App. [Settings] - [Gener ...

  6. mmm hardware/libhardware_legacy/power/

    android源码目录下的build/envsetup.sh文件,描述编译的命令 - m:       Makes from the top of the tree.  - mm:      Buil ...

  7. MongoDB 学习笔记（二） 高级查询

    1.条件运算符 2.$all 匹配所有 3.$exists 判断字段是否存在 4.NUll 值处理 5.$mod 取模处理 6.$ne 不等于 7. $in 包含,与sql用法相同 8. $nin 不 ...

  8. minimum-number-of-arrows-to-burst-balloons（还挺好）

    https://leetcode.com/problems/minimum-number-of-arrows-to-burst-balloons/ 与会议室排期问题,很相似. package com. ...

  9. C# Winform DataGridView分页功能的实现

    // 1.定义几个所需的公有成员: ; //每页显示行数 ; //总记录数 ; //页数＝总记录数/每页显示行数 ; //当前页号 ; //当前记录行 DataSet ds = new DataSet ...

  10. simplefactory简单工厂模式

    简单工厂模式概述    又叫静态工厂方法模式,它定义一个具体的工厂类负责一些类的实例 优点    客户端不需要在负责对象的创建,从而明确了各个类的职责 缺点:    这个静态工厂类负责所有对象的创建, ...