Svg.js使用手册
简介：
SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。 
SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。 

SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。 

SVG.js中的一些亮点： 

∙ 易读的简洁的语法
∙ 非常轻量，gzip压缩版只有5k
∙ 针对大小、位置、颜等的动画元素
∙ 模块化结构，轻松扩展
∙ 各种实用插件
∙ 各种形状类型间拥有统一的API.
∙ 元素可以绑定事件，包括触摸事件
∙ 完全支持不透明蒙版
∙ 元素组
∙ 动态渐变
∙ 填充模式
∙ 完整的文档记录
使用说明：
Create a SVG document
Use the SVG() function to create a SVG document within a given html element:
var draw = SVG('canvas').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
The first argument can either be an id of the element or the selected element itself. This will generate the following output:
<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>
By default the svg canvas follows the dimensions of its parent, in this case #canvas:
var draw = SVG('canvas').size('100%', '100%')
Checking for SVG support
By default this library assumes the client's browser supports SVG. You can test support as follows:
if (SVG.supported) {
  var draw = SVG('canvas')
  var rect = draw.rect(100, 100)
} else {
  alert('SVG not supported')
}
ViewBox
The viewBox attribute of an <svg> element can be managed with the viewbox() method. When supplied with four arguments it will act as a setter:
draw.viewbox(0, 0, 297, 210)
Alternatively you can also supply an object as the first argument:
draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })
Without any arguments an instance of SVG.ViewBox will be returned:
var box = draw.viewbox()
But the best thing about the viewbox() method is that you can get the zoom of the viewbox:
var box = draw.viewbox()
var zoom = box.zoom
If the size of the viewbox equals the size of the svg canvas, the zoom value will be 1.
Nested svg
With this feature you can nest svg documents within each other. Nested svg documents have exactly the same features as the main, top-level svg document:
var nested = draw.nested()
var rect = nested.rect(200, 200)
This functionality requires the nested.js module which is included in the default distribution.
SVG document
Svg.js also works outside of the HTML DOM, inside an SVG document for example:
<?xml version="1.0" encoding="utf-8" ?>
<svg id="viewport" xmlns=js arguments"/2000/svg" xmlns:xlink="/1999/xlink" version="1.1" >
  <script type="text/javascript" xlink:href="svg.min.js"></script>
  <script type="text/javascript">
    <![CDATA[
      var draw = SVG('viewport')
      (100,100).animate().fill('#f03').move(100,100)
    ]]>
  </script>
</svg>
Elements
Rect
Rects have two arguments, their width and height:
var rect = draw.rect(100, 100)
Ellipse
Ellipses, like rects, have two arguments, their width and height:
var ellipse = draw.ellipse(200, 100)
Circle
The only argument necessary for a circle is the diameter:
var circle = draw.circle(100)
Note that this generates an <ellipse> element instead of a <circle>. This choice has been made to keep the size of the library down.
Line
The line element always takes four arguments, x1, y1, x2 and y2:
var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })
Polyline
The polyline element defines a set of connected straight line segments. Typically, polyline elements define open shapes:
// polyline('x,y x,y x,y')
var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })
Polyline strings consist of a list of points separated by spaces: x,y x,y x,y.
As an alternative an array of points will work as well:

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