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学习笔记（二）的更多相关文章

  1. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

  2. AJax 学习笔记二(onreadystatechange的作用)

    AJax 学习笔记二(onreadystatechange的作用) 当发送一个请求后,客户端无法确定什么时候会完成这个请求,所以需要用事件机制来捕获请求的状态XMLHttpRequest对象提供了on ...

  3. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  4. JMX学习笔记(二)-Notification

    Notification通知,也可理解为消息,有通知,必然有发送通知的广播,JMX这里采用了一种订阅的方式,类似于观察者模式,注册一个观察者到广播里,当有通知时,广播通过调用观察者,逐一通知. 这里写 ...

  5. java之jvm学习笔记二(类装载器的体系结构)

    java的class只在需要的时候才内转载入内存,并由java虚拟机的执行引擎来执行,而执行引擎从总的来说主要的执行方式分为四种, 第一种,一次性解释代码,也就是当字节码转载到内存后,每次需要都会重新 ...

  6. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  7. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  8. NumPy学习笔记 二

    NumPy学习笔记 二 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...

  9. Learning ROS for Robotics Programming Second Edition学习笔记(二) indigo tools

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS for Robotics Pr ...

  10. Redis学习笔记二 （BitMap算法分析与BitCount语法）

    Redis学习笔记二 一.BitMap是什么 就是通过一个bit位来表示某个元素对应的值或者状态,其中的key就是对应元素本身.我们知道8个bit可以组成一个Byte,所以bitmap本身会极大的节省 ...

随机推荐

  1. Android模拟器如何加载本机地址及访问本机服务器

    首先获取本机ip地址: 在cmd 命令窗口中输入 ipconfig 查看本地电脑ip地址如下: 获取服务器上的Json数据,并返回结果,部分代码如下: 注:StreamUtils是自定义的一个工具类, ...

  2. 【Android - 基础】之Animator属性动画

    1      概述 在3.0系统之前,Android给我们提供了逐帧动画Frame Animation和补间动画Tween Animation两种动画: 1)        逐帧动画的原理很简单,就是 ...

  3. macos ssh host配置及免密登陆

    windows下面有xshell 这样的可视化ssh管理工具 macos 下面使用终端做下简单配置,也非常方便,具体过程如下 生成秘钥 cd ~/.sshssh-keygen -t rsa 生成了私钥 ...

  4. invoke-command

    远程执行命令: invoke-command -ComputerName $server -Credential $cred -ScriptBlock{param($server,$UserName, ...

  5. HDU5100Chessboard（数论）

    HDU5100Chessboard(数论) 题目链接 题目大意:用k∗1的瓷砖区铺n∗n的矩形,问能铺上的最大的面积. 解题思路:这题没有直接得出结论:l = n%k, ans = max[(n^2 ...

  6. Android SimpleAdapter源码详解

    一直没认真看过android的源码,也不太敢看,稀里糊涂也敲了一年的代码,现在想好好学习了,就把常用的源码都看了一下,小伙伴们来涨姿势吧,有错误的地方,直接指出,我脸厚不怕丢人.来吧. 刚开始学and ...

  7. 【02】尽量以const，enum，inline替换#define

    1.考虑为什么? 首先,#define不是语言的一部分,而是预编译过程.也就是在编译器编译之前,进行文本替换.考虑#define Pi 3.1425:在编译之前,Pi都会被文本替换为3.1415,因此 ...

  8. VS2005配置CPPUnit进行单元測试

    一. 编译CPPUnitproject 1.  解压文件cppunit-1.12.1.tar.gz. 2.  编译$BASE/src/cppunit/CppUnitLibraries.dsw中的cpp ...

  9. Java SE学习之printf 日期转换符

    本文是学习网络上的文章时的总结,感谢大家无私的分享. System.out.printf()方法能够对日期做处理输出. 相应列表 转换符 类型 举例 c 完整的日期和时间 Mon Feb 09 18: ...

  10. sigar监控

    相关参照博客: http://liningjustsoso.iteye.com/blog/1254584 http://blog.csdn.net/aoxida/article/category/12 ...