本实例展示如何在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. Java多线程编程：Callable、Future和FutureTask浅析（多线程编程之四）

    java多线程-概念&创建启动&中断&守护线程&优先级&线程状态(多线程编程之一)java多线程同步以及线程间通信详解&消费者生产者模式&死锁& ...

  2. Verify the Developer App certificate for your account is trusted on your device.

    1.报错内容 Could not launch "CH5203" Verify the Developer App certificate for your account is ...

  3. 列表和range、元组

    1.listt.append()默认追加在后面 2.list.insert(索引,“元素”)按索引添加 3.list.extend()可添加多个字或字母的字符串,也可以是列表 4.list.pop() ...

  4. 教你玩转XSS漏洞

    什么是存储性XSS那? 通俗理解就是”xss“语句存在服务器上,可以一直被客户端浏览使用,所有登陆某一个存在”存储性xss“的页面的人,都会中招,可以是管理员,可以是普通的用户,所以他的危害是持续性的 ...

  5. [ActionScript 3.0] 模拟win7彩色气泡屏保效果

    主文件: package { import com.views.BubbleView; import com.views.ColorfulBubble; import flash.display.Sp ...

  6. Redis存储

    redis库提供了两个类:Redis和StrictRedis来实现Redis的命令操作,前者是为了兼容老版本库的集中方法,一般就用StrictRedis 一. redis基本操作 . 设置redis密 ...

  7. Class文件分析

    java源码和class文件 源码: package classloader; public class TestCase { private int value; public int test() ...

  8. 【python】10分钟教你用python打造贪吃蛇超详细教程

    10分钟教你用python打造贪吃蛇超详细教程 在家闲着没妹子约, 刚好最近又学了一下python,听说pygame挺好玩的.今天就在家研究一下, 弄了个贪吃蛇出来.希望大家喜欢. 先看程序效果: 0 ...

  9. win10 下springcloud打包docker镜像部署。

    1:建一个最简单的springcloud应用. 2:在根目录下新建dockerfile,文件如下: FROM openjdk:8-jdk-alpine VOLUME /tmp ARG JAR_FILE ...

  10. Windows下的VMware导入到Mac的VMware Function

    在windows下是以文件夹的形式存在的,但是在Mac下是以.vmwarevm为后缀的文件. 操作步骤: 把windows下的虚拟机整个文件夹拷贝到Mac,然后文件夹后面加上.vmwarevm. 然后 ...