1 SVG简介
可缩放矢量图形是基于可扩展标记语言(标准通用标记语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。
2 SVG的特点
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
3 浏览器支持
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。
4 SVG 标签
SVG 代 码以 <svg> 元素开始,包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。 width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本,xmlns 属性可定 义 SVG 命名空间。
5 SVG 制作素描线动画举例
1)首先画一条素描线 如图:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox = "0 0 200 100"> <!-- fill属性是否填充 stroke为绘制,颜色#AAAAAA stroke-width为绘制线的粗细 d是具体数据,这里看到的数据代表了坐标,以及折线等等,可以使用工具生成 --> <path fill="none" stroke = "#AAA" stroke-width = "2" d = "M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215" /> </svg>
素描线的参数可以使用工具生成,
2)SVG实现素描的动画及原理
stroke-dasharray = "100 10" stroke-dashoffset = "0"
stroke-dasharray定义了生成线段长度,及其线段和线段之间的缝隙 ,这里包含两个参数
stroke-dashoffset定义了从那个位置开始渲染生成线段
相关课程 SVG实现的素描动画模拟效果及其原理
3)使用CSS3来实现素描动画效果
/*定义keyframe动画*/ /* 添加动画到path元素 */ .path{ stroke-dasharray: 265.07; stroke-dashoffset: 265.07; animation: dash 3s linear infinite; /* 支持chrome */ -webkit-animation: dash 3s linear infinite; } @keyframes dash{ from{ stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */ } to{ stroke-dashoffset: 0; } } /* 支持chrome浏览器 */ @-webkit-keyframes dash{ from{ stroke-dashoffset: 265.07; /* 这里是svg图形中素描线长度,可以使用js获取 */ } to{ stroke-dashoffset: 0; } }
相关课程 使用CSS3实现素描动画效果
4)使用Javascript来调节动画效果的参数
/*定义相关Javascript*/ var current_frame, //定义当前帧 total_frames, //定义全部帧数 path, //定义svg中的唯一path元素 length, //定义path所生成的素描长度 handle; //定义javascript动画句柄 path = document.getElementById('path'), length = path.getTotalLength(); //定义初始化方法 var init = function(){ current_frame = 0; total_frames = 160; path.style.strokeDasharray = length + ' ' + length; //定义dasharray path.style.strokeDashoffset = length; //定义dashoffset handle = 0; } //定义实际的动画绘制方法 var draw = function(){ var progress = current_frame/total_frames; if(progress>1){ //这里定义完成动画 window.cancelAnimationFrame(handle); }else{//否则使用reqeuestAnimationFrame来生成动画 current_frame++; path.style.strokeDashoffset = Math.floor(length*(1 - progress)); handle = window.requestAnimationFrame(draw); } } //定义一个重新运行方法 var rerun = function(){ init(); draw(); } //页面加载即运行 rerun();
这里主要定义初始化方法和动画绘制的方法,window.requestAnimationFrame(draw);
来生成动画。
5)我们选用极客标签的logo,作为原始图片,坐标参数用 Inkscape 工具生成。
当运行动画绘制程序的时候,各条线安装设定的方式进行绘制,我们就看到非常酷的预加载动画了。
相关推荐
13款使用html5 svg技术打造的页面loading加载动画效果。页面的3d效果使用了css3动画技术。整个loading加载动画效果时尚新颖。
html5 SVG绘图动画制作页面加载loading绘图动画效果 html5 SVG绘图动画制作页面加载loading绘图动画效果
Android中使用SVG实现炫酷动画效果Android中使用SVG实现炫酷动画效果
包含使用svg制作的加载loading动画。该加载loading动画特效共有11种效果,使用img标签直接调用svg文件来生成各种SVG动态图片。
SVG 实现一个扁平化的页面预加载效果 SVG 实现一个扁平化的页面预加载效果
10款华丽的SVG Loading加载动画效果,利用SVG的路径特性,动态绘制形状和状态,从而产生Loading加载的视觉效果。
一款基于js和html5 SVG螺旋式扩散网页加载等待动画特效,旋转扩散Loading加载动画效果。
13种svg html5 loading页面加载动画弹出 html5 loading页面加载动画
13种svg html5 loading页面加载动画弹出层效果代码
CSS3 SVG网页沙漏加载动画特效
一款使用html5 svg和css3制作的页面loading加载动画效果,这个切换页面效果在页面加载时出现圆形laoding加载进度条,loading加载完毕,页面以炫酷的动画切换到另一个页面。
css3 svg图标制作环形loading加载动画特效 css3 svg图标制作环形loading加载动画特效
一款基于SVG和CSS3的动画Tab菜单插件,菜单图标使用SVG绘制而成,切换时还会产生不错的动画效果,还同时会渐变地更新页面的背景颜色,当然如果你觉得太花里胡哨,可以自行修改js代码取消背景颜色的渐变切换。
这是一款使用html5 svg制作的加载loading动画特效插件。该加载loading动画特效共有12种效果,使用img标签直接调用svg文件来生成各种SVG动态图片。
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ,一共是4个网页加载特效动画,这些Loading看上去是不是很眼熟,在手机上或PC端见到的几率比较大,纯HTML5 SVG技术实现,没有使用任何图片资源,而且个个精美。...
HTML5 SVG实现超酷的盆栽藤曼生长动画效果源码.zip
这是一款基于HTML5 SVG的超酷雷达扫描式页面切换jQuery特效。该页面切换特效使用jQuery代码来动态生成svg,并使用velocity.js来驱动SVG完成页面切换时的雷达扫描效果个线条动画。
HTML5+SVG实现的圆形闪电电弧加载动画效果源码.zip
CSS3+SVG实现S形进度条加载动画效果源码.zip
一款个性好看的基于SVG实现的Loading加载按钮动画图标特效,SVG加载按钮动画代码。