Svg.js实例教程及使用手册详解(一)


Posted in Javascript onMay 16, 2016

什么是SVG?

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用 XML 格式定义图形

SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

简介:

SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画。

SVG(Scalable Vector Graphics,可缩放矢量图形)是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。

SVG.js中包含了大量用于定义动画的方法,如移动、缩放、旋转、倾斜等,具体可参阅相关演示。

SVG.js中的一些亮点:

•易读的简洁的语法

•非常轻量,gzip压缩版只有5k

•针对大小、位置、颜色等的动画元素

•模块化结构,轻松扩展

•各种实用插件

•各种形状类型间拥有统一的API.

•元素可以绑定事件,包括触摸事件

•完全支持不透明蒙版

•元素组

•动态渐变

•填充模式

•完整的文档记录

使用说明:

创建一个SVG文档

使用SVG()函数来在一个给定的html元素中创建一个SVG文档:

var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })

其中SVG()中的参数可以使一个元素的id或者元素本身。

以上两句将在html文档中产生以下代码:

<div id="canvas">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<rect width="100" height="100" fill="#f06"></rect>
</svg>
</div>

当然,要定义SVG画布的大小,除了使用像素之外,也可以使用百分比的。如下:

var draw = SVG('canvas').size('100%', '100%')

检测浏览器对SVG的支持度

在使用svg.js之前,可以先用以下的代码来检测浏览器对svg.js这个库的支持情况:

if (SVG.supported) { 
var draw = SVG('canvas') 
var rect = draw.rect(100,100) } 
else { 
alert('SVG not supported') }

ViewBox

<svg>的属性可以用viewbox()方法来确定,viewbox()方法就像是一个setter函数一样,如下所示:

draw.viewbox(0,0,297,210)

上面的一行代码和下面的一行代码是等价的,前两个参数表示<svg>的位置,后两个是其宽度和高度。

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })

如果没有任何参数,那么viewbox就直接返回一个空的<svg>:

var box = draw.viewbox()

viewbox() 方法可以有zoom属性,

var box = draw.viewbox() var zoom = box.zoom

如果viewbox中的<svg>的大小和实际的SVG画布的大小相同,那么zoom的值就是1.

SVG 文档

svg.js也可以在htmlDOM外工作,如下所示,是一个独立的svg文件,就像是外部的js文件一样。

<?xml version="1.0" encoding="utf-8" ?> 
<svg id="viewport"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"version="1.1"> 
<script type="text/javascript"xlink:href="svg.min.js">
</script> 
<scripttype="text/javascript"> 
<![CDATA[ 
var draw = SVG('viewport') 
draw.rect(100,100).animate().fill('#f03').move(100,100) 
]]> 
</script> 
</svg>

以上所述是小编给大家介绍的Svg.js实例教程及使用手册详解(一)的内容,下面将持续更新svg.js的其他方法的用法,敬请关注!

Javascript 相关文章推荐
jQuery实现在最后一个元素之前插入新元素的方法
Jul 18 Javascript
Angularjs中UI Router的使用方法
May 14 Javascript
javascript RegExp 使用说明
May 21 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
Angular2 (RC5) 路由与导航详解
Sep 21 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
浅析vue-router中params和query的区别
Dec 24 Javascript
限制只能输入数字的实现代码
May 16 #Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 #Javascript
基于javascript实现最简单的选项卡切换效果
May 16 #Javascript
JavaScript实现页面跳转的方式汇总
May 16 #Javascript
js实现页面跳转的几种方法小结
May 16 #Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 #Javascript
KnockoutJs快速入门教程
May 16 #Javascript
You might like
php处理restful请求的路由类分享
2014/02/27 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
FLASH 广告之外的链接
2008/12/16 Javascript
jQuery的三种$()
2009/12/30 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
ajax +NodeJS 实现图片上传实例
2017/06/06 NodeJs
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
2017/09/10 jQuery
浅谈Node Inspector 代理实现
2017/10/19 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
详解JavaScript栈内存与堆内存
2019/04/04 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
[01:15:29]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第三局
2016/03/04 DOTA
python比较两个列表是否相等的方法
2015/07/28 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
django将数组传递给前台模板的方法
2019/08/06 Python
python 模拟创建seafile 目录操作示例
2019/09/26 Python
Python字符串的修改方法实例
2019/12/19 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
领导欢迎词范文
2015/01/26 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL