本实例展示如何在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. Vue的基本认识与使用

    什么是Vue? Vue是一个渐进式的js框架,采用的是MVVM模式的双向绑定, Vue的使用 引入vue        <script src="vuejs/vue.js"& ...

  2. Python3.5 学习七

    心灵鸡汤 好书推荐:消费者行为学.围城.活着.盲井.三体.北京折叠 静态方法: @staticmethod #名义上归类管,和类没什么关系,只是引用用"." 在静态方法中,无法访问 ...

  3. H - Graphics（dfs）

    H - Graphics   Time Limit:1000MS     Memory Limit:131072KB     64bit IO Format:%lld & %llu Submi ...

  4. E - More is better （并查集）

    点击打开链接 Mr Wang wants some boys to help him with a project. Because the project is rather complex, th ...

  5. “全栈2019”Java多线程第十章：Thread.State线程状态详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  6. “全栈2019”Java异常第二章：如何处理异常？

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  7. 利用jaxb实现xml和bean的相互转换

    1.使用jar包生成xsd文件 java -jar trang.jar a.xml a.xsd xml格式 生成的xsd文件 2.使用xjc命令生成bean文件 xjc a.xsd 生成的相关bean ...

  8. [CSS3] 动画暗角按钮

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. C语言实现单链表，并完成链表常用API函数

    C语言实现单链表,并完成链表常用API函数: 1.链表增.删.改.查. 2.打印链表.反转打印.打印环形链表. 3.链表排序.链表冒泡排序.链表快速排序. 4.求链表节点个数(普通方法.递归方法). ...

  10. GCD介绍：Dispatch_source

    [转自:GCD介绍(三): Dispatch Sources] 何为Dispatch Sources 简单来说,dispatch source是一个监视某些类型事件的对象.当这些事件发生时,它自动将一 ...