本实例展示如何在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. dokcer 的export 、improt和save 、load

    export .improt 是对容器操作也就是类似于虚拟机的快照 save .load 是针对于镜像操作的..

  2. php 编译代码

    编译其实就是把所有的代码整合在于一个文件,减少文件包含时间,加快php解析,虽然优化后时间上提升了不多,但能优化便多多少少进行优化.下面给一个编译例子,从而引申. // 定义编译状态 define(' ...

  3. Prim算法---最小生成树

    最小生成树的Prim算法也是贪心算法的一大经典应用.Prim算法的特点是时刻维护一棵树,算法不断加边,加的过程始终是一棵树. Prim算法过程: 一条边一条边地加, 维护一棵树. 初始 E ＝ {}空 ...

  4. Hibernate 干货2

    @ORM框架 对象关系映射,用于实现面向对象编程语言里不同系统的数据之间的转换 @实例public void demo01(){  User user = new User();  user.setU ...

  5. zTree第三章，异步加载，前端

    zTree异步加载 ---------------------------------------------------------------------------------- 具体详见API ...

  6. ubuntu下apache2使用的简单总结

        一. 修改apache2原80端口为90端口 1. 修改/etc/apache2/ports.conf, 将端口80改为90,443,改为444 2. 修改/etc/apache2/sites ...

  7. C++基础知识-inline、const、mutable、this、static

    一.在类定义中实现成员函数inline 类内的成员函实现其实也叫作类内的成员函数定义. 这种直接在类的定义中实现的函数,会被当做inline内联函数来处理. 二.成员函数末尾的const const: ...

  8. Mysql 四种事务隔离介绍以及锁机制

    还有很多不太懂,这里收集几份大佬文章“飞机票”,待我整理好了,再好好写一篇文章吧. MySQL的四种事务隔离级别 https://www.cnblogs.com/huanongying/p/70215 ...

  9. SQL Full Join 的 Where条件

    SQL需求是损益视图串资产负债视图 用Excel透视表模拟出来的结果就是 用SQL查询如下: 当Where条件是左边的视图的时候 select 损益视图.年 ,损益视图.年月 ,损益视图.期间 ,损益 ...

  10. 基于聚类的“图像分割”(python)

    基于聚类的“图像分割” 参考网站: https://zhuanlan.zhihu.com/p/27365576 昨天萌新使用的是PIL这个库,今天发现机器学习也可以这样玩. 视频地址Python机器学 ...