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. 《JavaScript设计模式》笔记之第一、二章：富有表现力的JavaScript 和 接口

    第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = functi ...

  2. 如何连接MDB数据，并且获取相关的数据

    不说了直接上代码: try{ String str = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source='" + address + & ...

  3. ListBox，CheckBoxList，DropDownList，RadioButtonList的常见数据绑定

    ListBox,CheckBoxList,DropDownList,RadioButtonList的常见用法 四个都是选择控件,用法大同小异,基本都是指定键值对: 直接加选择项: void way1( ...

  4. uvm_misc——杂货铺（miscellaneous）

    uvm_misc 是个很有意思的文件夹,本质上就是个UVM的杂货铺,包含一些很重要的class, task, function, 但不知道给归类到哪儿,所以,uvm_misc就很好地承担了这个任务,几 ...

  5. Windows系统下Android开发环境搭建

    “工具善其事,必先利其器”.要想学好Android,搭建好Android开发环境是一个良好的开端. Windows系统下Android开发环境主要有4个大的步骤.分别是: 1.JDK的安装 2.ecl ...

  6. 网络大牛如何回答Chrome的15个刁钻面试题？

    (内容来自网络整理) Google的面试题在刁钻古怪方面相当出名,甚至已经有些被神化的味道.这里整理出15道Google面试题并一一给出了网络大牛的答案,其中不少都是流传很广的. 第1题:让你清洗西雅 ...

  7. Django 模型ORM

    from django.db import models # Create your models here. class Book(models.Model): nid = models.AutoF ...

  8. Maven01

    1. Maven简单介绍 Apache Maven是个项目管理和自动构建工具,基于项目对象模型(POM)的概念.  作用:完成项目的相关操作,如:编译,构建,单元测试,安装,网站生成和基于Maven部 ...

  9. Java的jdbc调用SQL Server存储过程Bug201906131120

    如果要查询结果,第一行使用set nocount on;可能可以解决问题.

  10. linux yum 安装mysql

    1.安装查看有没有安装过: yum list installed MySQL* rpm -qa | grep mysql* 查看有没有安装包: yum list mysql* 安装mysql客户端: ...