http://www.zhangxinxu.com/wordpress/2014/04/animateion-line-drawing-svg-path-%E5%8A%A8%E7%94%BB-%E8%B7%AF%E5%BE%84/

<!DOCTYPE html>

<html lang="en">

	<head>

		<meta charset="UTF-8">

		<title>Title</title>

		<style type="text/css">

			path {

			  stroke-dasharray: 1000;

			  stroke-dashoffset: 1000;

			  animation: dash 5s linear infinite;

			}

			@keyframes dash {

			  to {

			    stroke-dashoffset: 0;

			  }

			}

		</style>

	</head>

	<body>

		<svg width="100%" height="320" xmlns="http://www.w3.org/2000/svg">

			<!--<path d="M150 0 L75 200 L225 200 Z" stroke="black" fill="transparent"/>-->

			<path d="M30 30 L25 30 L20 80 L10 90 L20 100 L20 180 L30 180 " stroke="red" fill="none" stroke-width="3"/>

			<!--<path d="M30 20 C 30 20, 10 30, 20 30" stroke="black" fill="transparent"/>-->

			 <!--<text x="0" y="100" style="fill:red;">

			       节点1

			 </text>

			-->

		</svg>

		<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">

			<title>马儿跑</title>

			<g>

				<text font-family="microsoft yahei" font-size="120" y="160" x="160">

            马

            <set attributeName="x" attributeType="XML" to="60" begin="3s" />

        </text>

			</g>

		</svg>

		<br/>

		<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">

			<g>

				<text font-family="microsoft yahei" font-size="120" y="160" x="160">

            马

            <animate attributeName="x" from="0" to="160" begin="0s" dur="3s" repeatCount="indefinite" />

        </text>

			</g>

		</svg>

		<br/>

		<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">

			<g>

				<text font-family="microsoft yahei" font-size="80" y="100" x="100">马</text>

				<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="0.1" to="1" repeatCount="1" />

			</g>

		</svg>

		<br/>

		<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">

			<text font-family="microsoft yahei" font-size="40" x="0" y="0" fill="#cd0000">马

        <animateMotion path="M10,80 L100,120,Z" begin="0s" dur="2s" repeatCount="indefinite"/>

        <animate attributeName="opacity" from="1" to="0" begin="0s" dur="2s" repeatCount="indefinite" />

        <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />

    </text>

			<path d="M10,80 L100,120,Z" stroke="#cd0000" stroke-width="2" fill="none" />

		</svg>

		<br/>

		<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">

			<title>马儿跑</title>

			<text font-family="microsoft yahei" font-size="40" y="60" x="100">马

        <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="10s" repeatCount="indefinite" additive="sum"/>

        <animateTransform attributeName="transform" type="rotate" from="0 100 60" to="360 100 60" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>

    </text>

		</svg>

	</body>

</html>

　　

svg path 动画效果的更多相关文章

  1. SVG路径动画解密

    原文:SVG路径动画解密 原文链接:http://www.gbtags.com/gb/share/5581.htm SVG路径动画效果现在貌似越来越多网站都使用了,给我的感觉就像是一段时间的流行而已, ...

  2. 如何使用SVG及其动画技术为你的 Web 前端开发带来一些新鲜的体验

    任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战.设备间不同的屏幕尺寸.分辨率和比例使得产品难以提供一致的体验,对于那些对产品有着像素级完美追求的人这种体验差异尤其显著! SVG(可 ...

  3. CAShapeLayer的path动画

    CAShapeLayer的path动画 效果 源码 https://github.com/YouXianMing/Animations // // CAShapeLayerPathController ...

  4. 如何使用SVG生成超酷的页面预加载素描动画效果

    在线演示 本地下载 1 SVG简介 可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式.它由万维网联盟制定,是一个开放标准. 2 SVG的特点 与其他图像 ...

  5. 使用 SVG 来实现波浪 (wave) 动画效果

    如下图所示的波浪动画效果,实现方法有很多,比如CSS或者是js等方法都可以实现.不过,要是使用SVG来实现的,我觉得比其它两种方法都要简单.这篇文章就来讲讲使用SVG来实现类似这样的波浪动画效果是多么 ...

  6. 纯CSS实现帅气的SVG路径描边动画效果(转载)

    本文转载自: 纯CSS实现帅气的SVG路径描边动画效果

  7. SVG的路径动画效果

    使用SVG animateMotion实现的一个动画路径效果,相关代码如下. 在线调试唯一地址:http://www.gbtags.com/gb/debug/c88f4099-5056-4ad7-af ...

  8. Android实现炫酷SVG动画效果

    svg是眼下十分流行的图像文件格式了,svg严格来说应该是一种开放标准的矢量图形语言,使用svg格式我们能够直接用代码来描画图像,能够用不论什么文字处理工具打开svg图像.通过改变部分代码来使图像具有 ...

  9. 【Web动画】SVG 线条动画入门

    通常我们说的 Web 动画,包含了三大类. CSS3 动画 javascript 动画(canvas) html 动画(SVG) 个人认为 3 种动画各有优劣,实际应用中根据掌握情况作出取舍,本文讨论 ...

随机推荐

  1. Unity Shader入门精要学习笔记 - 第15章 使用噪声

    转载自 冯乐乐的 <Unity Shader 入门精要> 消融效果 消融效果常见于游戏中的角色死亡.地图烧毁等效果.这这些效果中,消融往往从不同的区域开始,并向看似随机的方向扩张,最后整个 ...

  2. #113. 【UER #2】手机的生产

    链接:http://uoj.ac/problem/113 由于电信技术的发展,人人都可以通过手机互相联系. 有一位电信大佬最近想生产一大批手机,然而从生产线上一台一台地生产实在太慢了,于是他想出了一个 ...

  3. bootstrap输入框组、导航和导航条

    输入框组(input groups) 避免使用select  支持不好,使用输入框组 尺寸根据  input-group-lg    input-group-sm来选择   <div class ...

  4. storm trident的filter和函数

    目的:通过kafka输出的信息进行过滤,添加指定的字段后,进行打印 SentenceSpout: package Trident; import java.util.HashMap; import j ...

  5. 终端工具Xmanager使用技巧

    1. 新建绘画使用终端连接服务器 2. 设置终端类型和编码 3. 设置终端外观,包括字体颜色等等 4. 设置默认上传路径和下载路径

  6. SQL Server 2008 转换为 SQL 2005 数据库 脚本生成

    Tips: 本文讨论如何把数据库从SQL Server 2008版本降低到2005,因为在本地开发是以SQL Server 2008 Express Edition版本进行的,而主机提供商现在提供的M ...

  7. POJ 1655 Balancing Act （树的重心，常规）

    题意:求树的重心,若有多个重心,则输出编号较小者,及其子树中节点最多的数量. 思路: 树的重心:指的是一个点v,在删除点v后,其子树的节点数分别为:u1,u2....,设max(u)为其中的最大值,点 ...

  8. 51nod 1283 最小周长

    一个矩形的面积为S,已知该矩形的边长都是整数,求所有满足条件的矩形中,周长的最小值.例如:S = 24,那么有{1 24} {2 12} {3 8} {4 6}这4种矩形,其中{4 6}的周长最小,为 ...

  9. codeforces Gym 100338H High Speed Trains （递推，高精度）

    递推就好了,用二项式定理算出所有连边的方案数,减去不合法的方案, 每次选出一个孤立点,那么对应方案数就是上次的答案. 枚举选几个孤立点和选哪些,选到n-1个点的时候相当于都不选,只减1. 要用到高精度 ...

  10. 数学题 HDOJ——2086 简单归纳

    哎 真的是懒得动脑子还是怎么滴... 题目如下 Problem Description 有如下方程:Ai = (Ai-1 + Ai+1)/2 - Ci (i = 1, 2, 3, .... n).若给 ...