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-Jquery简介 入门了解篇
Nov 25 Javascript
关于延迟加载JavaScript
May 05 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
Bootstrap Table使用方法解析
Oct 19 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Javascript刷新页面的实例
Sep 23 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
原生js实现九宫格拖拽换位
Jan 26 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
自己动手做一个SQL解释器
2006/10/09 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP无刷新上传文件实现代码
2011/09/19 PHP
Yii实现MySQL多数据库和读写分离实例分析
2014/12/03 PHP
利用PHP脚本在Linux下用md5函数加密字符串的方法
2015/06/29 PHP
Zend Framework教程之模型Model基本规则和使用方法
2016/03/04 PHP
Laravel定时任务的每秒执行代码
2019/10/22 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
jQuery实现的图文高亮滚动切换特效实例
2015/08/10 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python 开发Activex组件方法
2009/11/08 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
python创建文件备份的脚本
2018/09/11 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
python实现按行分割文件
2019/07/22 Python
详细分析Python垃圾回收机制
2020/07/01 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
若通过ObjectOutputStream向一个文件中多次以追加方式写入object,为什么用ObjectInputStream读取这些object时会产生StreamCorruptedException?
2016/10/17 面试题
经典优秀个人求职自荐信格式
2013/09/25 职场文书
前台文员我鉴定
2014/01/12 职场文书
2014年基层党组织公开承诺书
2014/03/29 职场文书
田径运动会通讯稿
2014/09/13 职场文书
员工辞退通知书
2015/04/17 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python竟然能剪辑视频
2021/05/25 Python
MySQL系列之开篇 MySQL关系型数据库基础概念
2021/07/02 MySQL
yolov5返回坐标的方法实例
2022/03/17 Python