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的动态创建DOM元素的代码
Dec 28 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
javascript实现checkbox全选的代码
Apr 30 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
微信小程序自定义组件components(代码详解)
Oct 21 Javascript
javascript实现拼图游戏
Jan 29 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
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
jQuery插件datalist实现很好看的input下拉列表
2015/07/14 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
对js中回调函数的一些看法
2016/08/29 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
[06:24]DOTA2 2015国际邀请赛中国区预选赛第二日TOP10
2015/05/27 DOTA
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
python3将变量输入的简单实例
2020/08/19 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
植物选择:Botanic Choice
2017/02/15 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
微软马来西亚官方网站:Microsoft马来西亚
2019/11/22 全球购物
美国最大的烧烤架和户外生活用品专业零售商:Barbeques Galore
2021/01/09 全球购物
《狼和小羊》教学反思
2014/04/20 职场文书
2014年质检员工作总结
2014/11/18 职场文书
数学教师个人工作总结
2015/02/06 职场文书
开展警示教育活动总结
2015/05/09 职场文书
七年级作文之我的梦想
2019/10/16 职场文书