Svgjs使用手册.docx

1、Svgjs使用手册Svg.js使用手册简介：SVG.js是一个轻量级的JavaScript库，允许你轻松操作SVG和定义动画。SVG（Scalable Vector Graphics，可缩放矢量图形）是基于XML、用于描述二维矢量图形的一种图形格式。SVG由W3C制定，是一个开放标准。SVG.js中包含了大量用于定义动画的方法，如移动、缩放、旋转、倾斜等，具体可参阅相关演示。SVG.js中的一些亮点： 易读的简洁的语法 非常轻量，gzip压缩版只有5k 针对大小、位置、颜色等的动画元素 模块化结构，轻松扩展 各种实用插件 各种形状类型间拥有统一的API. 元素可以绑定事件，包括触摸事件 完全支

2、持不透明蒙版 元素组 动态渐变 填充模式 完整的文档记录使用说明：Create a SVG documentUse theSVG()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.

3、This will generate the following output: 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 supportBy default this library assumes the clients browser supports SVG. You can test support as follows:if (SVG.suppor

4、ted) var draw = SVG(canvas) var rect = draw.rect(100, 100) else alert(SVG not supported)ViewBoxTheviewBoxattribute of anelement can be managed with theviewbox()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

5、 the first argument:draw.viewbox( x: 0, y: 0, width: 297, height: 210 )Without any arguments an instance ofSVG.ViewBoxwill be returned:var box = draw.viewbox()But the best thing about theviewbox()method is that you can get the zoom of the viewbox:var box = draw.viewbox()var zoom = box.zoomIf the siz

6、e of the viewbox equals the size of the svg canvas, the zoom value will be 1.Nested svgWith 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)Thi

7、s functionality requires the nested.js module which is included in the default distribution.SVG documentSvg.js also works outside of the HTML DOM, inside an SVG document for example: ElementsRectRects have two arguments, theirwidthandheight:var rect = draw.rect(100, 100)EllipseEllipses, like rects,

8、have two arguments, theirwidthandheight:var ellipse = draw.ellipse(200, 100)CircleThe only argument necessary for a circle is the diameter:var circle = draw.circle(100)Note that this generates anelement instead of a. This choice has been made to keep the size of the library down.LineThe line element

9、 always takes four arguments,x1,y1,x2andy2:var line = draw.line(0, 0, 100, 150).stroke( width: 1 )PolylineThe 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).fil

10、l(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:/ polyline(x,y, x,y, x,y)var polyline = draw.polyline(0,0, 100,50, 50,100).fill(none).stroke( width: 1 )Polylines can be updated using theplot

11、()method:polyline.plot(0,0, 100,50, 50,100, 150,50, 200,50)Theplot()method can also be animated:polyline.animate(3000).plot(0,0, 100,50, 50,100, 150,50, 200,50, 250,100, 300,50, 350,50)PolygonThe polygon element, unlike the polyline element, defines a closed shape consisting of a set of connected st

12、raight line segments:/ polygon(x,y x,y x,y)var polygon = draw.polygon(0,0 100,50 50,100).fill(none).stroke( width: 1 )Polygon strings are exactly the same as polyline strings. There is no need to close the shape as the first and last point will be connected automatically.PathThe path string is simil

13、ar to the polygon string but much more complex in order to support curves:/ path(path data)var path = draw.path(M10,20L30,40)For more details on path data strings, please refer to the SVG documentation:http:/www.w3.org/TR/SVG/paths.html#PathDataNote that paths will always be positioned at x=0, y=0 on creation. This is to make the unifiedmove()api possible. Svg.js assumes you are creating a path to move it afterwards. If you need to constantl