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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
javascript 主动派发事件总结
Aug 09 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
微信开发 js实现tabs选项卡效果
Oct 28 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
浏览器JavaScript调试功能无法使用解决方案
Sep 18 Javascript
vue-calendar-component 封装多日期选择组件的实例代码
Dec 04 Vue.js
js之ajax文件上传
May 13 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新手上路(十一)
2006/10/09 PHP
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP生成Gif图片验证码
2013/10/27 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
javascript实现全角转半角的方法
2016/01/23 Javascript
Node.js文件操作方法汇总
2016/03/22 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
javascript中replace使用方法总结
2017/03/01 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
jQuery实现的鼠标拖动浮层功能示例【拖动div等任何标签】
2018/12/29 jQuery
js实现上传按钮并显示缩略图小轮子
2020/05/04 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python字符串和字典相关操作的实例详解
2017/09/23 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
印度尼西亚手表和包包商店:Urban Icon
2019/12/12 全球购物
品管员岗位职责
2013/11/10 职场文书
表彰先进的通报
2014/01/31 职场文书
司马光教学反思
2014/02/01 职场文书
七年级上册语文教学计划
2015/01/22 职场文书
英语教师求职信范文
2015/03/20 职场文书
离婚撤诉申请书范本
2015/05/18 职场文书
SpringCloud的JPA连接PostgreSql的教程
2021/06/26 Java/Android
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang