SVG.js 是一个轻量级的 JavaScript 库,允许你轻松操作 SVG 和定义动画。这篇文章主要介绍了 Svg.js 实例教程及使用手册详解(一) 的相关资料, 需要的朋友可以参考下
SVG.js 中包含了大量用于定义动画的方法,如移动、缩放、旋转、倾斜等,具体可参阅相关演示。
什么是 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
- draw.viewbox(0,0,297,210)
上面的一行代码和下面的一行代码是等价的,前两个参数表示
- draw.viewbox({
- x: 0,
- y: 0,
- width: 297,
- height: 210
- })
如果没有任何参数,那么 viewbox 就直接返回一个空的
- var box = draw.viewbox()
viewbox() 方法可以有 zoom 属性,
- var box = draw.viewbox() var zoom = box.zoom
如果 viewbox 中的
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>
来源: http://www.phperz.com/article/17/0301/265728.html