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 = (100, 100).attr({ fill: '#f06' })
其中SVG()中的参数可以使⼀个元素的id或者元素本⾝。
以上两句将在html⽂档中产⽣以下代码：
<div id="canvas">
<svg xmlns="/2000/svg" version="1.1" xmlns:xlink="/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 = (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 = svg图形
如果viewbox中的<svg>的⼤⼩和实际的SVG画布的⼤⼩相同，那么zoom的值就是1.
SVG ⽂档
svg.js也可以在htmlDOM外⼯作，如下所⽰，是⼀个独⽴的svg⽂件，就像是外部的js⽂件⼀样。
<?xml version="1.0" encoding="utf-8" ?>
<svg id="viewport"xmlns="/2000/svg"xmlns:xlink="/1999/xlink"version="1.1">
<script type="text/javascript"xlink:href="svg.min.js">
</script>
<scripttype="text/javascript">
<![CDATA[
var draw = SVG('viewport')
<(100,100).animate().fill('#f03').move(100,100)
]]>
</script>
</svg>
以上所述是⼩编给⼤家介绍的Svg.js实例教程及使⽤⼿册详解（⼀）的内容，下⾯将持续更新svg.js的其他⽅法的⽤法，敬请关注！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。