SVG 旋转图形实例
本实例展示如何在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 旋转图形实例的更多相关文章
- JavaScript图形实例:图形的旋转变换
旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...
- SVG基础绘图实例
SVG可缩放矢量图(Scalable Vector Graphics),是使用 XML 来描述二维图形和绘图程序的语言,图像在放大或改变尺寸的情况下其图形质量不会有所损失,是万维网联盟的标准. 下面整 ...
- 多比(SVG/VML)图形控件多比(SVG/VML)图形拓扑图控件免费下载地址
多比图形控件是一款基于Web(VML和SVG技术)的矢量图形控件, 类似于网页上的Visio控件拓扑图软件,是目前国内外最佳的基于web的工作流设计器.工作流流程监视器解决方案. 可广泛应用于包括:电 ...
- 【D3.V3.js系列教程】--(十五)SVG基本图形绘制
[D3.V3.js系列教程]--(十五)SVG基本图形绘制 1.path <!DOCTYPE html> <html> <head> <meta charse ...
- canvas绘制旋转图形
将绘制到canvas上的要素进行旋转: 1.绘制时,通过操作画布的坐标轴状态:平移画布原点,旋转坐标轴等,达到旋转图形的目的 2.操作操作DOM元素,直接旋转canvas画布 操作画布的坐标轴状态: ...
- 理解SVG的图形填充规则
SVG的图形填充规则通过fill-rule属性来指定. 有效值: nonzero | evenodd | inherit 默认值: nonzero fill-rule属性用于指定使用哪一种算法 ...
- D3.js学习笔记(六)——SVG基础图形和D3.js
目标 在这一章,我们将会重温SVG图形,学习如何使用D3.js来创建这些图形. 这里会包括前面例子中的SVG基础图形以及如何使用D3.js设置图形的属性. 使用D3.js画一个SVG 的 圆 circ ...
- SVG 基础图形
SVG 基础图形 SVG包含了以下的基础图形元素: 矩形(包括可选的圆角),使用<rect>元素创建 圆形,使用<circle>元素创建 椭圆形,使用<ellipse&g ...
- JavaScript图形实例:线段构图
在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...
随机推荐
- Android intent 传值不更新的原因和解决办法
当 Activity 的启动模式是 singleTask 或者 singleInstance 的时候.如果使用了 intent 传值,则可能出现 intent 的值无法更新的问题.也就是说每次 int ...
- AcWing 143. 最大异或对
https://www.acwing.com/problem/content/145 #include <iostream> #include <algorithm> usin ...
- vue 路由传参
mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由 2.history路由 不会带#的 单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...
- Ajax请求的参数
post请求和get请求存放参数位置 post请求和get请求存放参数位置是不同的: post方式参数存放在请求数据包的消息体中. get方式参数存放在请求数据包的请求行的URI字段中,以?开始以pa ...
- Elastic Search 5.x Nest Multiple Queries C#
I'm using C# with those nuget packeges; <package id="Elasticsearch.Net" version="5 ...
- Spring注解大全,汇总版
Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- centos启动错误:Inodes that were part of a corrupted orphan linked list found.
centos启动时,提示错误: /dev/mapper/VolGroup-lv_root contains a file system with errors,check forced. /dev/m ...
- 3.1 High Availability
摘要: 出处:黑洞中的奇点 的博客 http://www.cnblogs.com/kelvin19840813/ 您的支持是对博主最大的鼓励,感谢您的认真阅读.本文版权归作者所有,欢迎转载,但请保留该 ...
- asp.net图片上传代码
前端: <form action="/ImageUpload.ashx" method="post" enctype="multipart/fo ...
- sql自查询各种状态数据总和