svg.js中文API 简易版

2019独角兽企业重金招聘Python工程师标准>>>

svg.js是一个轻量级的操纵和制作SVG动画的js插件库。svg.js没有任何的外部依赖，它遵循麻省理工学院的许可（ MIT License）下许可证的条款。

使用方法

插入一个SVG

可以使用SVG()方法在指定的元素中创建一个SVG。

var draw = SVG('drawing').size(300, 300) var rect = draw.rect(100, 100).attr({ fill: '#f06' })

第一个参数可以是一个元素的ID或元素本身，上面的代码会得到下面的输出结果：

<div id="drawing">     <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的尺寸取决于它的父元素的大小，上面的代码中是#drawing。

var draw = SVG('drawing').size('100%', '100%')

检测浏览器是否支持SVG

默然情况下，svg.js假设客户端浏览器支持SVG，你也可以测试浏览器是否支持SVG：

if (SVG.supported) {   var draw = SVG('drawing')   var rect = draw.rect(100, 100) } else {   alert('SVG not supported') }

SVG文档

Svg.js可以在HTML DOM元素之外工作，例如在一个SVG文档中：

<?xml version="1.0" encoding="utf-8" ?> <svg id="drawing" 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>   <script type="text/javascript">     <![CDATA[       var draw = SVG('drawing')       draw.rect(100,100).animate().fill('#f03').move(100,100)     ]]>   </script> </svg>

子像素的偏移修正

默认情况下子像素的偏移是不正确的，你可以通过fixSubPixelOffset()方法来修正它：

var draw = SVG('drawing').fixSubPixelOffset()

父元素

主SVG文档

svg.js初始化时在给定的元素中创建一个SVG根元素，并通过SVG.Doc返回该SVG对象的实例。

var draw = SVG('drawing') //returns: SVG.Doc

JavaScript继承堆栈:SVG.Doc < SVG.Container < SVG.Parent

嵌套SVG

你可以通过该特性来在一个SVG中嵌套另一个SVG。嵌套SVG和顶级SVG拥有相同的特性。

var nested = draw.nested() var rect = nested.rect(200, 200) //returns: SVG.Nested

JavaScript继承堆栈:SVG.Nested < SVG.Container < SVG.Parent

SVG组

如果你想转换一组元素为一个SVG，可以使用SVG组特性。组中的所有元素的位置都相对于包含它的组。组中的元素拥有和根SVG相同的方法：

var group = draw.group() group.path('M10,20L30,40')

可以将现有的SVG元素添加到组中：

group.add(rect) //returns: SVG.G

JavaScript继承堆栈:SVG.G < SVG.Container < SVG.Parent

超链接

通过一个超链接或<a>元素来创建容器可以使它的所有子元素获取该链接：

var link = draw.link('http://svgjs.com') var rect = link.rect(100, 100)

超链接的url可以通过to()方法来更新：

link.to('http://www.htmleaf.com')

此外，超链接元素有一个show()方法可也创建xlink:show属性：

link.show('replace')

target()方法可以创建target属性：

link.target('_blank')

元素也可以通过linkTo()被链接到其它地方：

link.linkTo('http://www.htmleaf.com')

使用函数的方式可以同时添加多个属性：

rect.linkTo(function(link) {   link.to('http://svgjs.com').target('_blank') })

返回：SVG.A

JavaScript继承堆栈:SVG.A < SVG.Container < SVG.Parent

Defs

<defs>元素是一个引用其它元素的容器元素。一个"defs"的后代元素不会直接被渲染。<defs>节点在<svg>文档中有效：

var defs = draw.defs()

defs在任何使用doc()方法的元素上有效：

var defs = rect.doc().defs()

返回：SVG.Defs

JavaScript继承堆栈:SVG.Defs < SVG.Container < SVG.Parent

绘制矩形

矩形有两个参数：它们的width和height。

var rect = draw.rect(100, 100)

返回值：SVG.rect

JavaScript继承堆栈:SVG.rect < SVG.Shape < SVG.Element

radius()

矩形也可以制作圆角：

rect.radius(10)

上面的代码将设置rx和ry的值为10。如果要单独的设置rx和ry的值，可以：

rect.radius(10, 20)

返回值：itself

绘制椭圆形

椭圆形也有两个参数：width和height。

var ellipse = draw.ellipse(200, 100)

返回值：SVG.Ellipse

JavaScript继承堆栈:SVG.ellipse < SVG.Shape < SVG.Element

radius()

可以通过radius()方法重定义椭圆的宽度和高度：

rect.radius(75, 50)

返回值：itself

绘制圆形

绘制圆形仅需要一个参数：直径。

var circle = draw.circle(100)

返回值：SVG.Ellipse

JavaScript继承堆栈:SVG.ellipse < SVG.Shape < SVG.Element

注意这里返回的是一个<ellipse>而不是<circle>。

radius()

可以通过radius()方法重定义椭圆的直径：

rect.radius(75)

返回值：itself

绘制直线

绘制一条直线需要4个参数：x1、y1、x2和y2。

var line = draw.line(0, 0, 100, 150).stroke({ width: 1 })

返回值：SVG.Line

JavaScript继承堆栈:SVG.line < SVG.Shape < SVG.Element

plot()

可以通过plot()方法来更新直线的坐标点：

line.plot(50, 30, 100, 150)

返回值：itself

绘制折线

一条折线包含多条直线，典型的例子是一个开口的多边形：

// polyline('x,y x,y x,y') var polyline = draw.polyline('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

Polyline的参数包含一系列的空间点：x,y x,y x,y 。

可以使用数组来替代它们：

// polyline([[x,y], [x,y], [x,y]]) var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1 })

返回值：SVG.Polyline

JavaScript继承堆栈:SVG.Polyline < SVG.Shape < SVG.Element

plot()

可以通过plot()方法来更新折线的坐标点：

polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

plot()方法也可用于动画：

polyline.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

返回值：itself

绘制多边形

一个多边形是一组封闭的直线的组合。

// polygon('x,y x,y x,y') var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1 })

返回值：SVG.Polygon

JavaScript继承堆栈:SVG.Polygon < SVG.Shape < SVG.Element

plot()

可以通过plot()方法来更新多边形的坐标点：

polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])

plot()方法也可用于动画：

polygon.animate(3000).plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])

返回值：itself

绘制路径

路径和多边形类似，但是由于它支持曲线所以要复杂一些：

draw.path('M 100 200 C 200 100 300  0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

返回值：SVG.Path

JavaScript继承堆栈:SVG.Path < SVG.Shape < SVG.Element

要了解更多关于路径数据的信息，可以参考W3的SVG文档：http://www.w3.org/TR/SVG/paths.html#PathData。

plot()

可以通过plot()方法来更新路径的坐标点：

path.plot('M100,200L300,400')

返回值：itself

绘制图像

可以绘制你需要的图片：

var image = draw.image('/path/to/image.jpg')

如果你知道图片的尺寸，可以在第二个和第三个参数中设置它们：

var image = draw.image('/path/to/image.jpg', 200, 300)

返回值：SVG.Image

JavaScript继承堆栈:SVG.Image < SVG.Shape < SVG.Element

load()

可以通过load()方法来加载另一张图片。

draw.image('/path/to/another/image.jpg')

返回值：itself

loaded()

如果你不知道图片的大小，你就需要等待图片加载完毕：

var image = draw.image('/path/to/image.jpg').loaded(function(loader) {   this.size(loader.width, loader.height) })

loaded方法返回的loader随性有四个参数：

• width
• height
• ratio (width / height)
• url

返回值：itself

绘制文本

不同于HTML文本，制作SVG文本要困难得多。你没有办法插件流式文本，必须手动换行。在svg.js中有两种方法创建SVG文本。

第一个方法比较简单，为它提供文本字符串，并通过换行符来分割字符串。

var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")

这将会自动创建一个带换行的文本块。

第二种方法可以更好的控制SVG文字，但是需要更多的代码。

var text = draw.text(function(add) {   add.tspan('Lorem ipsum dolor sit amet ').newLine()   add.tspan('consectetur').fill('#f06')   add.tspan('.')   add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)   add.tspan('Nunc ultrices lectus at erat').newLine()   add.tspan('dictum pharetra elementum ante').newLine() })

如果只有一行文本，可以使用plain()方法：

var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')

plain()方法是SVG.Text的一个快捷方式。在不需要换行额情况下使用。

返回值：SVG.Text

JavaScript继承堆栈:SVG.Text < SVG.Shape < SVG.Element

text()

可以使用text()方法来改变文字：

text.text('Brilliant!')

返回值：itself

要获取文本的内容可以：

text.text()

返回值：string

tspan()

也可以添加一个tspan：

text.tspan(' on a train...').fill('#f06')

返回值：SVG.TSpan

plain()

如果元素内容不需要样式或多行，可以全部使用plain文本：

text.plain('I do not have any expectations.')

返回值：itself

font()

sugar.js模式可以为元素提供一些文本样式：

text.font({   family:   'Helvetica' , size:     144 , anchor:   'middle' , leading:  '1.5em' })

返回值：itself

build()

build()方法可以用来使用和禁用build模式。当build模式模式被禁用，plain()和tspan()方法在添加新的内容之前首先调用clear()方法。当打开build模式时，plain()和tspan()方法将会追加新的内容。当通过text()方法制作一个文本块的时候，build模式会在文本块被调用之前和之后自动切换。

var text = draw.text('This is just the start, ')   text.build(true)  // enables build mode   var tspan = text.tspan('something pink in the middle ').fill('#00ff97') text.plain('and again boring at the end.')   text.build(false) // disables build mode   tspan.animate('2s').fill('#f06')

返回值：itself

rebuild()

这是一个内部的回调方法，你可能不会使用到。它在文本的font-size、x或leading()被修改时重建文本元素。该方法可以通过一个setter来使用和禁用rebuild()方法：

text.rebuild(false) //-> disables rebuilding text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element

clear()

清除文本

text.clear()

返回值：itself

length()

获取所有文本的长度：

text.length()

返回值：number

lines

所有添加的tspans都被存储在lines引用中，它是SVG.Set的一个实例。

events

文本元素只有一个事件。它在每次rebuild()方法被调用时触发。

text.on('rebuild', function() {   // whatever you need to do after rebuilding })

TSpan

TSpan元素只在文本元素或其它TSpan元素中有效。在 svg.js中它有自己的class：

JavaScript继承堆栈:SVG.TSpan < SVG.Shape < SVG.Element

text()

更新tspan中的内容，参数只能是一个字符串：

tspan.text('Just a string.')

可以通过一个函数块来添加更多的文本内容：

tspan.text(function(add) {   add.plain('Just plain text.')   add.tspan('Fancy text wrapped in a tspan.').fill('#f06')   add.tspan(function(addMore) {     addMore.tspan('And you can doo deeper and deeper...')   }) })

返回值：itself

tspan()

添加一个嵌套的tspan()：

tspan.tspan('I am a child of my parent').fill('#f06')

返回值：SVG.TSpan

plain()

添加一些plain文本：

tspan.plain('I do not have any expectations.')

返回值：itself

dx

动态定义元素的x值。和html元素的position:relative和left定义类似：

tspan.dx(30)

返回值：itself

dy

动态定义元素的y值。和html元素的position:relative和top定义类似：

tspan.dy(30)

返回值：itself

newLine()

newLine()是一个方便的添加新行的方法：

var text = draw.text(function(add) {   add.tspan('Lorem ipsum dolor sit amet ').newLine()   add.tspan('consectetur').fill('#f06')   add.tspan('.')   add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)   add.tspan('Nunc ultrices lectus at erat').newLine()   add.tspan('dictum pharetra elementum ante').newLine() })

返回值：itself

clear()

清除所有tspan 元素的内容：

tspan.clear()

返回值：itself

length()

获取所有文本的长度：

tspan.length()

返回值：number

文本路径

svg 的一个新特性是可以制作文本路径：

var text = draw.text(function(add) {   add.tspan('We go ')   add.tspan('up').fill('#f09').dy(-40)   add.tspan(', then we go down, then up again').dy(40) }) text   .path('M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')   .font({ size: 42.5, family: 'Verdana' })

当在文本元素上调用path()方法的时候，文本元素会变形为路径。也可以通过plot()方法来更新文本路径：

text.plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100')

<textPath>元素可以对自己使用textPath实例：

text.textPath.attr('startOffset', 0.5)

它们也可以被执行动画：

text.textPath.animate(3000).attr('startOffset', 0.8)

返回值：SVG.TextPath

JavaScript继承堆栈:SVG.TextPath < SVG.Element

track

直接引用路径元素：

var path = text.track

svg.js还提供了许多方法和事件，具体的请参考：http://documentup.com/wout/svg.js。

本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/html5/SVG/201501301301.html

转载于:https://my.oschina.net/iyinghui/blog/1439185