svg.js是一个轻量级的操纵和制作SVG动画的js插件库。svg.js没有任何的外部依赖,它遵循麻省理工学院的许可( MIT License)下许可证的条款。
使用方法
插入一个SVG
可以使用SVG()
方法在指定的元素中创建一个SVG。
|
第一个参数可以是一个元素的ID或元素本身,上面的代码会得到下面的输出结果:
|
默认情况下,SVG的尺寸取决于它的父元素的大小,上面的代码中是#drawing
。
|
检测浏览器是否支持SVG
默然情况下,svg.js假设客户端浏览器支持SVG,你也可以测试浏览器是否支持SVG:
|
SVG文档
Svg.js可以在HTML DOM元素之外工作,例如在一个SVG文档中:
|
子像素的偏移修正
默认情况下子像素的偏移是不正确的,你可以通过fixSubPixelOffset()
方法来修正它:
|
父元素
主SVG文档
svg.js初始化时在给定的元素中创建一个SVG根元素,并通过SVG.Doc
返回该SVG对象的实例。
|
JavaScript继承堆栈:SVG.Doc
< SVG.Container
< SVG.Parent
嵌套SVG
你可以通过该特性来在一个SVG中嵌套另一个SVG。嵌套SVG和顶级SVG拥有相同的特性。
|
JavaScript继承堆栈:SVG.Nested
< SVG.Container
< SVG.Parent
SVG组
如果你想转换一组元素为一个SVG,可以使用SVG组特性。组中的所有元素的位置都相对于包含它的组。组中的元素拥有和根SVG相同的方法:
|
可以将现有的SVG元素添加到组中:
|
JavaScript继承堆栈:SVG.G
< SVG.Container
< SVG.Parent
超链接
通过一个超链接或<a>
元素来创建容器可以使它的所有子元素获取该链接:
|
超链接的url可以通过to()
方法来更新:
|
此外,超链接元素有一个show()
方法可也创建xlink:show
属性:
|
target()
方法可以创建target
属性:
|
元素也可以通过linkTo()
被链接到其它地方:
|
使用函数的方式可以同时添加多个属性:
|
返回:SVG.A
JavaScript继承堆栈:SVG.A
< SVG.Container
< SVG.Parent
Defs
<defs>
元素是一个引用其它元素的容器元素。一个"defs"的后代元素不会直接被渲染。<defs>
节点在<svg>
文档中有效:
|
defs在任何使用doc()
方法的元素上有效:
|
返回:SVG.Defs
JavaScript继承堆栈:SVG.Defs
< SVG.Container
< SVG.Parent
绘制矩形
矩形有两个参数:它们的width
和height
。
|
返回值:SVG.rect
JavaScript继承堆栈:SVG.rect
< SVG.Shape
< SVG.Element
radius()
矩形也可以制作圆角:
|
上面的代码将设置rx
和ry
的值为10。如果要单独的设置rx
和ry
的值,可以:
|
返回值:itself
绘制椭圆形
椭圆形也有两个参数:width
和height
。
|
返回值:SVG.Ellipse
JavaScript继承堆栈:SVG.ellipse
< SVG.Shape
< SVG.Element
radius()
可以通过radius()
方法重定义椭圆的宽度和高度:
|
返回值:itself
绘制圆形
绘制圆形仅需要一个参数:直径。
|
返回值:SVG.Ellipse
JavaScript继承堆栈:SVG.ellipse
< SVG.Shape
< SVG.Element
注意这里返回的是一个<ellipse>
而不是<circle>
。
radius()
可以通过radius()
方法重定义椭圆的直径:
|
返回值:itself
绘制直线
绘制一条直线需要4个参数:x1、y1、x2和y2。
|
返回值:SVG.Line
JavaScript继承堆栈:SVG.line
< SVG.Shape
< SVG.Element
plot()
可以通过plot()
方法来更新直线的坐标点:
|
返回值:itself
绘制折线
一条折线包含多条直线,典型的例子是一个开口的多边形:
|
Polyline的参数包含一系列的空间点:x,y x,y x,y
。
可以使用数组来替代它们:
|
返回值:SVG.Polyline
JavaScript继承堆栈:SVG.Polyline
< SVG.Shape
< SVG.Element
plot()
可以通过plot()
方法来更新折线的坐标点:
|
plot()
方法也可用于动画:
|
返回值:itself
绘制多边形
一个多边形是一组封闭的直线的组合。
|
返回值:SVG.Polygon
JavaScript继承堆栈:SVG.Polygon
< SVG.Shape
< SVG.Element
plot()
可以通过plot()
方法来更新多边形的坐标点:
|
plot()
方法也可用于动画:
|
返回值:itself
绘制路径
路径和多边形类似,但是由于它支持曲线所以要复杂一些:
|
返回值:SVG.Path
JavaScript继承堆栈:SVG.Path
< SVG.Shape
< SVG.Element
要了解更多关于路径数据的信息,可以参考W3的SVG文档:http://www.w3.org/TR/SVG/paths.html#PathData。
plot()
可以通过plot()
方法来更新路径的坐标点:
|
返回值:itself
绘制图像
可以绘制你需要的图片:
|
如果你知道图片的尺寸,可以在第二个和第三个参数中设置它们:
|
返回值:SVG.Image
JavaScript继承堆栈:SVG.Image
< SVG.Shape
< SVG.Element
load()
可以通过load()
方法来加载另一张图片。
|
返回值:itself
loaded()
如果你不知道图片的大小,你就需要等待图片加载完毕:
|
loaded
方法返回的loader
随性有四个参数:
- width
- height
- ratio (width / height)
- url
返回值:itself
绘制文本
不同于HTML文本,制作SVG文本要困难得多。你没有办法插件流式文本,必须手动换行。在svg.js中有两种方法创建SVG文本。
第一个方法比较简单,为它提供文本字符串,并通过换行符来分割字符串。
|
这将会自动创建一个带换行的文本块。
第二种方法可以更好的控制SVG文字,但是需要更多的代码。
|
如果只有一行文本,可以使用plain()
方法:
|
plain()
方法是SVG.Text
的一个快捷方式。在不需要换行额情况下使用。
返回值:SVG.Text
JavaScript继承堆栈:SVG.Text
< SVG.Shape
< SVG.Element
text()
可以使用text()方法来改变文字:
|
返回值:itself
要获取文本的内容可以:
|
返回值:string
tspan()
也可以添加一个tspan:
|
返回值:SVG.TSpan
plain()
如果元素内容不需要样式或多行,可以全部使用plain文本:
|
返回值:itself
font()
sugar.js模式可以为元素提供一些文本样式:
|
返回值:itself
build()
build()
方法可以用来使用和禁用build模式。当build模式模式被禁用,plain()
和tspan()
方法在添加新的内容之前首先调用clear()
方法。当打开build模式时,plain()
和tspan()
方法将会追加新的内容。当通过text()方法制作一个文本块的时候,build模式会在文本块被调用之前和之后自动切换。
|
返回值:itself
rebuild()
这是一个内部的回调方法,你可能不会使用到。它在文本的font-size
、x
或leading()
被修改时重建文本元素。该方法可以通过一个setter来使用和禁用rebuild()方法:
|
clear()
清除文本
|
返回值:itself
length()
获取所有文本的长度:
|
返回值:number
lines
所有添加的tspans都被存储在lines
引用中,它是SVG.Set
的一个实例。
events
文本元素只有一个事件。它在每次rebuild()
方法被调用时触发。
|
TSpan
TSpan元素只在文本元素或其它TSpan元素中有效。在 svg.js中它有自己的class:
JavaScript继承堆栈:SVG.TSpan
< SVG.Shape
< SVG.Element
text()
更新tspan中的内容,参数只能是一个字符串:
|
可以通过一个函数块来添加更多的文本内容:
|
返回值:itself
tspan()
添加一个嵌套的tspan():
|
返回值:SVG.TSpan
plain()
添加一些plain文本:
|
返回值:itself
dx
动态定义元素的x
值。和html元素的position:relative
和left
定义类似:
|
返回值:itself
dy
动态定义元素的y
值。和html元素的position:relative
和top
定义类似:
|
返回值:itself
newLine()
newLine()是一个方便的添加新行的方法:
|
返回值:itself
clear()
清除所有tspan 元素的内容:
|
返回值:itself
length()
获取所有文本的长度:
|
返回值:number
文本路径
svg 的一个新特性是可以制作文本路径:
|
当在文本元素上调用path()
方法的时候,文本元素会变形为路径。也可以通过plot()
方法来更新文本路径:
|
<textPath>
元素可以对自己使用textPath实例:
|
它们也可以被执行动画:
|
返回值:SVG.TextPath
JavaScript继承堆栈:SVG.TextPath
< SVG.Element
track
直接引用路径元素:
|
svg.js还提供了许多方法和事件,具体的请参考:http://documentup.com/wout/svg.js。
本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/html5/SVG/201501301301.html