本实例展示如何在SVG中画出一个正方形并使之旋转。运行结果如下图所示：

在文本框中输入时间间隔，单位是毫秒。点击Start按钮，蓝色方块就会开始转动，每个时间间隔变化一度。变换的角度在下面的Angle处显示。

实现代码如下，技术要点已经详细注释。

<!DOCTYPE html>

<?xml version="1.0" ?>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

</head>

<body>

    <!-- <svg>标签声明一个svg画布长40px宽40px -->

    <svg width="40px" height="40px" style="border:1px solid black">

        <!-- <g>标签可以包含多个图形合成一个组，并对组里的图形进行统一处理。transform="translate(20,20)"表示在<g>里的所有图形都会向下向右平移20px -->

        <g transform="translate(20,20)" id="myImage">

            <!-- <rect>可以在画布上画出一个长方形，此长方形长宽都是20px，图形中心在(-10,-10)处，但经过<g>的变换会落在(10,10)处。颜色是蓝色 -->

            <rect id="mySquare" x="-10" y="-10" width="20" height="20" fill="blue"  />

        </g>

    </svg>

    <br/>

    <input id="speed" type="text" value="10" />

    <button id="zoom" onclick="startAnimation();">Start</button>

    <p id="angle"></p>

    <script>

        var squareShape;

        function startAnimation() {

            //squareShape是要转动的那个正方形

            squareShape = document.getElementById("mySquare");

            //初始转角为0

            squareShape.currentTheta = 0;

            //setInterval函数可以无限循环执行某个函数，第一个参数是要执行的函数名，第二个参数是时间间隔，单位毫秒。

            setInterval("animateImage()",speed.value);

        }

        //转动正方形

        function animateImage() {

            //正方形的transform属性是对图形进行变换，rotate(x)表示对图形旋转x度

            squareShape.setAttribute("transform", "rotate(" + squareShape.currentTheta + ")");

            squareShape.currentTheta += 1;

            //显示旋转的度数

            document.getElementById("angle").innerText = "Angle:" + squareShape.currentTheta;

        }

    </script>

</body>

</html>

SVG 旋转图形实例的更多相关文章

  1. JavaScript图形实例：图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  2. SVG基础绘图实例

    SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...

  3. 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址

    多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...

  4. 【D3.V3.js系列教程】--（十五）SVG基本图形绘制

    [D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...

  5. canvas绘制旋转图形

    将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...

  6. 理解SVG的图形填充规则

    SVG的图形填充规则通过fill-rule属性来指定. 有效值:   nonzero | evenodd | inherit 默认值:   nonzero fill-rule属性用于指定使用哪一种算法 ...

  7. D3.js学习笔记（六）——SVG基础图形和D3.js

    目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...

  8. SVG 基础图形

    SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...

  9. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

随机推荐

  1. 「CodeChef - SKIRES」Ski Resort

    题目链接 戳我 \(Description\) 给你一个\(n*m\)的网格,以及网格上的两个格子\(A,B\).每个格子有一个高度.每次操作可以选择一个格子(不能是\(A\)或\(B\))并将它的高 ...

  2. PL/SQL控制语句（二、循环控制语句）

    循环允许重复执行代码直到循环条件匹配,PL/SQL中循环主要有LOOP语句和EXIT语句两种,这两种语句相辅相成,一起组成了PL/SQL的循环结构.在PL/SQL中,循环分为四大类,本文将会讲解其中的 ...

  3. springboot 使用itextpdf 框架实现多个图片合成一个pdf文件

    以下两个方法引入头 import com.lowagie.text.*; import com.lowagie.text.pdf.PdfWriter; import org.apache.pdfbox ...

  4. jmeter我们必须搞清楚的问题

    我们从以下几个点来看jmeter: 1.jmeter是什么? 2.jmeter为什么我们要使用jmeter?他可以帮我们解决那些事情? 3.怎样使用jmeter做这些事情? 4.我们在什么时候会使用j ...

  5. React Native vs. Cordova.

    简评:跨平台开发五彩斑斓,本文作者简单介绍 RN 和 Cordova 的两种不同终端跨平台流程,从与原生开发联系中分析其利弊. 什么是原生(Native)? 原生是一个相对概念.其实软件开发最后意义指 ...

  6. 总结day7 ---- 函数的内容 ,初识,返回值,进阶(一)

    内容大纲: 一: 函数识别 二: 函数的结构 三: 函数的返回值, 四: 函数的参数 五: 动态参数 六: 形参的顺序 七: 名称空间 八: 作用域 九: 加载顺序和取值顺序 十: 内置函数 十一: ...

  7. python中的类方法、静态方法、对象方法

    注:以下都是以公有为前提,私有方法只能在类内部调用,不需多讲. 1.对象方法 这种方法都有一个默认参数:self  这代表实例的这个对象 def __init__(self): print(" ...

  8. webpack+vue中安装使用vue-layer弹窗插件

    1.安装vue-layer插件 npm install vue-layer --save-dev 2.打包入口文件main.js中引入vue.vue-layer.并且将vue-layer添加到vue原 ...

  9. 图的最小生成树的理解和实现：Prim和Kruskal算法

    最小生成树 一个连通图的生成树是一个极小的连通子图,它含有图中所有的顶点,但只有足以构成一棵树的n-1条边.我们将构造连通网的最小代价生成树称为最小生成树(Minimum Cost Spanning ...

  10. CSS02--四种样式、背景、文本、链接状态、表格样式

    接上面的“CSS01”,我们接着来说一下样式.很多人不知道的是一个HTML元素有四种样式,分别是浏览器默认样式.外部样式.内部样式.内联样式,而它们的优先级是越来越高的,后面的样式会覆盖前面的样式.多 ...