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. unity3d 获取相机视口四个角的坐标

    功能:如标题所示,主要考虑用来做3d Plane的自适应屏幕 /// <summary> /// 获取指定距离下相机视口四个角的坐标 /// </summary> /// &l ...

  2. 分布式助手Zookeeper（二）

    分布式助手Zookeeper(二)博客分类: Zookeeper zookeeperzookeeper的安装和配置观察者observer 散仙在上篇文章介绍了,zookeeper的一系列基础知识,如果 ...

  3. Could not find class &#39;****&#39;, referenced from method #####

    找不到类,多半也是和第三方的jar包有关. 将找不到的类.在下图中的地方勾选出来.假设jar太多.有的类有冲突的话,须要明白其先后顺序. 请外一篇和第三方jar有关的异常的文章. Conversion ...

  4. 进程控制之wait3和wait4函数

    大多数UNIX系统实现提供了另外两个函数wait3和wait4.它们提供的功能比POSIX.1函数wait.waitpid和waitid所提供的功能要多一个,这与附加参数rusage有关.该参数要求内 ...

  5. Bash String Manipulation Examples – Length, Substring, Find and Replace--reference

    In bash shell, when you use a dollar sign followed by a variable name, shell expands the variable wi ...

  6. Iperf使用方法

    Iperf使用方法 Iperf  是一个网络性能测试工具.Iperf可以测试TCP和UDP带宽质量.Iperf可以测量最大TCP带宽,具有多种参数和UDP特性.Iperf可以报告带宽,延迟抖动和数据包 ...

  7. wamp配置虚拟主机

    ================================================================= 来源参考一:http://wenku.baidu.com/link? ...

  8. EF中使用数据库的标量值函数

    参考资料:https://msdn.microsoft.com/zh-cn/library/dd456847(v=vs.110).aspx http://stackoverflow.com/quest ...

  9. java基础加强

    一.泛型 Generic 1.集合泛型: 在没有泛型之前,集合中存入的数据,类型就会丢失掉,在取出数据时,需要做强制类型转换,就有转换失败的风险,而这种风险,在编译阶段是没有办法检查出来的 引入泛型后 ...

  10. hdoj1325 Is It A Tree?

    Is It A Tree?题目链接 题意: 多组测试数据, 每组数据有多个数对, 表示一条有向边(即第一个数是第二个数的父节点), 以 0,0 为一组测试数据结束标志.当输入-1,-1时测试结束. 从 ...