svg学习笔记（二）
SMIL animation演示代码集锦
<svg width="1400" height="1600" xmlns="http://www.w3.org/2000/svg">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<set attributeName="x" attributeType="XML" to="30" begin="2s"></set>
</text>
<g transform="translate(200,160)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
<g transform="translate(320,320)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</text>
</g>
<g transform="translate(480,480)">
<text font-family="microsoft yahei" font-size="80" y="100" x="100">
马
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="1.5" repeatCount="indefinite"/>
</text>
</g>
<g transform="translate(480,80)">
<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">
马
<animateMotion path="M10,80 q100,120 120,20 q140,-50 160,0" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion>
</text>
<path id="horsePath" d="M10,80 q100,120 120,20 q140,-50 160,0" stroke="#cd0000" stroke-width="2" fill="none"/>
</g>
<g transform="translate(640,180)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
</text>
</g>
<g transform="translate(640,360)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
</text>
</g>
<g transform="translate(640,520)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" values="160;40;160" dur="3s" begin="2s;6s" />
</text>
</g>
<g transform="translate(640,680)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate id="x" attributeName="x" to="60" begin="0s" dur="1.5s" fill="freeze" />
<animate attributeName="y" to="100" begin="x.end-0.5" dur="1.5s" fill="freeze" />
</text>
</g>
<g transform="translate(760,20)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160" id="clickText">
马
<animate attributeName="x" to="60" begin="clickText.click" dur="3s" />
</text>
</g>
<g transform="translate(760,180)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate id="x0" attributeName="x" to="60" begin="0s" dur="2s" repeatCount="indefinite" />
<animate attributeName="y" to="100" begin="x0.repeat(2)" dur="2s" fill="freeze" />
</text>
</g>
<!--快捷键仅在FF下支持-->
<g transform="translate(760,340)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160">
马
<animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" />
</text>
</g>
<g transform="translate(760,500)">
<text font-family="microsoft yahei" font-size="120" y="160" x="160" id="indefiniteText">
马
<animate attributeName="x" to="60" begin="indefinite" dur="3s" id="indefiniteA"/>
</text>
<a xlink:href="#indefiniteA">
<text x="300" y="200" fill="#cd0000" font-size="30">不要点我</text>
</a>
</g> <g transform="translate(10,500)">
<text font-size="60" y="60" x="160">
马
<animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
</text>
<text font-size="60" y="120" x="160">
马
<animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="paced"/>
</text>
<text font-size="60" y="180" x="160">
马
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
</text>
<text font-size="60" y="240" x="160">
马
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" />
</text>
</g> <g transform="translate(10,800)">
<text font-size="30" y="180" x="130">
马
<animateTransform attributeName="transform" type="scale" from="1" to="3" dur="5s" repeatCount="indefinite" additive="sum"/>
<animateTransform attributeName="transform" type="rotate" from="0 30 20" to="60 30 20" dur="5s" repeatCount="indefinite" additive="sum"/>
</text>
</g>
</svg>
svg学习笔记（二）的更多相关文章
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
- AJax 学习笔记二(onreadystatechange的作用)
AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- JMX学习笔记(二)-Notification
Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...
- java之jvm学习笔记二(类装载器的体系结构)
java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...
- Java IO学习笔记二
Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...
- 《SQL必知必会》学习笔记二)
<SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...
- NumPy学习笔记 二
NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...
- Redis学习笔记二 （BitMap算法分析与BitCount语法）
Redis学习笔记二 一.BitMap是什么 就是通过一个bit位来表示某个元素对应的值或者状态,其中的key就是对应元素本身.我们知道8个bit可以组成一个Byte,所以bitmap本身会极大的节省 ...
随机推荐
- SQL注入专题
SQL注入专题--整理帖 SQL注入是从正常的WWW端口访问,而且表面看起来跟一般的Web页面访问没什么区别, 所以目前市面的防火墙都不会对SQL注入发出警报,如果管理员没查看IIS日志的习惯,可能被 ...
- JAVA自动生成正则表达式工具类
经过很久的努力,终于完成了JAVA自动生成正则表达式工具类.还记得之前需要正则,老是从网上找吗?找了想修改也不会修改.现在不用再为此烦恼了,使用此生成类轻松搞定所有正则表达式.赶快在同事面前炫一下吧. ...
- SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程 'sys.sp_OACreate' 的访问
sqlserver2008导入excel到数据库的时候报错: SQL Server 阻止了对组件 'Ole Automation Procedures' 的 过程 'sys.sp_OACreate' ...
- iOS开发中一些常用的方法
1.压缩图片 #pragma mark 处理图片 - (void)useImage:(UIImage *)image { NSLog(@"with-----%f heught-----%f& ...
- vs2010突然变慢解决方法
方法一: 开始>>运行>>devenv.exe /resetuserdata
- 用Python和FFmpeg查找大码率的视频文件
用Python和FFmpeg查找大码率的视频文件 本文使用Python2.7, 这个工作分两步 遍历目录下的视频文件 用ffprobe获取是视频文件的码率信息 用ffprobe 获取json格式的视频 ...
- redhat 6 配置 yum 源的两种方法
由于 redhat的yum在线更新是收费的,如果没有注册的话不能使用,如果要使用,需将redhat的yum卸载后,重启安装,再配置其他源. 本文包括配置本地源及第三方源.第三方源包括:网易,epe ...
- 原创C# 枚举 多状态 操作
C# 中枚举类型是一种值类型,目前(vs2012)还不能用于泛型. 此类型最多的用处是标识一组相同类型的状态量或常量,比如: 状态量 示例一 [Flags] public enum Connectio ...
- PullToRefreshScrollView 修改下拉刷新图标
我的修改比较简单暴力.网上查了一番,貌似大家都没有改,无奈,查了一下源码.发现如下资源目录: 在看看我们的布局文件,此三个图片就是下拉刷新的三种图标 好吧,flip就是我目前的下拉刷新图片,对应的也就 ...
- cocos2d-x 开发中的小问题 在xcode4环境下
转自:http://hi.baidu.com/baby_66_/item/302353174f19521cd0d66df2 1.如果你在想怎么去搞定程序的开始运行的背景一闪而过的大图 以及icon想换 ...