Elements

Element是封裝SVG.js中所有元素（或節(jié)點(diǎn)）的基本原型轿曙。SVG.Shape添加了額外的細(xì)化級(jí)別。每個(gè)元素都可以具有fill和/或stroke屬性。最好在SVG.Shape上使用自己的方法擴(kuò)展元素会油，而不是在SVG.Element上。

SVG.Rect 矩形

rect()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Rect

矩形有兩個(gè)參數(shù)古毛，它們的width和height：

var rect = draw.rect(100, 100)

rect.radius()

returns itself
animate yes

矩形也可以有圓角：

rect.radius(10)

這將把rx和ry屬性設(shè)置為10翻翩。要分別設(shè)置rx和ry：

rect.radius(10, 20)

SVG.Circle 圓形

circle()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Circle

圓唯一需要的參數(shù)是直徑：

var circle = draw.circle(100)

circle.radius()

returns itself
animate yes

circle.radius(75)

SVG.Ellipse 橢圓

ellipse()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Circle

橢圓有兩個(gè)參數(shù)，width和height：

var ellipse = draw.ellipse(200, 100)

ellipse.radius()

returns itself
animate yes

橢圓也可以根據(jù)其半徑重新定義：

ellipse.radius(75, 50)

SVG.Line 線

line()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Line

創(chuàng)建從點(diǎn)A到點(diǎn)B的直線：

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

創(chuàng)建線元素有四種方法喇潘。查看plot()方法以查看所有可能性体斩。

line.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實(shí)例。這種方法相當(dāng)適合內(nèi)部使用：

polyline.array() 

更多信息: SVG.PointArray.

line.plot() 繪制

returns itself
animate yes

使用plot()方法更新行：

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

或者颖低，它還接受一個(gè)點(diǎn)字符串：

line.plot('0,0 100,150')

或數(shù)組：

line.plot([[0, 0], [100, 150]])

或者SVG.PointArray的一個(gè)實(shí)例：

var array = new SVG.PointArray([[0, 0], [100, 150]])
line.plot(array)

plot()方法也可以設(shè)置動(dòng)畫(huà)：

line.animate(3000).plot([[200, 200], [100, 150]])

SVG.Polyline 折線

polyline()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.poline

polyline元素定義一組連接的直線段絮吵。通常，多段線元素定義開(kāi)放形狀：

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

多段線字符串由逗號(hào)或空格分隔的點(diǎn)列表組成忱屑。所以x,yx,yx,y以及x,yx,y蹬敲，甚至x,y,x,y,x,y都會(huì)起作用。

作為替代方案莺戒，點(diǎn)數(shù)組也可以工作：

var polyline = draw.polyline([[0,0], [100,50], [50,100]])

或者甚至是一個(gè)平面點(diǎn)陣列伴嗡，這是首選：

var polyline = draw.polyline([0,0, 100,50, 50,100])

polyline.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實(shí)例。這種方法相當(dāng)適合內(nèi)部使用：

polyline.array()

More info: SVG.PointArray.

polyline.clear() 清除

returns itself

解析給定點(diǎn)數(shù)據(jù)時(shí)从铲，將緩存結(jié)果瘪校。此方法清除緩存。

polyline.clear()

polyline.plot() 繪制

returns itself
animate yes

多段線可以使用plot()方法更新：

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

plot()方法也可以設(shè)置動(dòng)畫(huà)：

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

SVG.Polygon 多邊形

polygon()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Polygon

多邊形元素與polyline元素不同名段，它定義了一個(gè)由一組連接的直線段組成的閉合形狀：

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

多邊形字符串或數(shù)組與多段線字符串完全相同阱扬。不需要關(guān)閉形狀，因?yàn)榈谝粋€(gè)和最后一個(gè)點(diǎn)將自動(dòng)連接。

polygon.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實(shí)例。這種方法相當(dāng)適合內(nèi)部使用：

polygon.array()

More info: SVG.PointArray.

polygon.clear() 清除

returns itself

解析給定點(diǎn)數(shù)據(jù)時(shí)喇嘱，將緩存結(jié)果。此方法清除緩存窃蹋。

polygon.clear()

polygon.plot() 繪制

returns itself
animate yes

與多段線一樣，可以使用plot()方法更新多邊形：

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

plot()方法也可以設(shè)置動(dòng)畫(huà)：

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

SVG.Path 路徑

path()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Path

路徑字符串類(lèi)似于多邊形字符串静稻，但為了支持曲線警没，它要復(fù)雜得多：

draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')

有關(guān)路徑數(shù)據(jù)字符串的詳細(xì)信息，請(qǐng)參閱 SVG documentation on path data.

path.array()

returns SVG.PathArray

引用SVG.PathArray實(shí)例振湾。這種方法相當(dāng)適合內(nèi)部使用：

path.array()

More info: SVG.PathArray.

path.clear()

returns itself

解析給定的路徑數(shù)據(jù)時(shí)惠奸，將緩存結(jié)果。此方法清除緩存恰梢。

path.clear()

path.length()

returns number

獲取路徑元素的總長(zhǎng)度：

var length = path.length()

path.pointAt()

returns SVGPoint

在給定長(zhǎng)度的路徑上獲取點(diǎn)：

var point = path.pointAt(105)

注意：pointAt()返回本機(jī)的SVG Point佛南，而不是SVG.Point。

path.plot()

returns itself
animate yes

可以使用plot()方法更新路徑：

path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')

plot()方法也可以設(shè)置動(dòng)畫(huà)：

path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)

SVG.js中的路徑設(shè)置動(dòng)畫(huà)只有基本支持嵌言，這意味著只有具有相同命令（M嗅回、C、S等）的路徑才可以設(shè)置動(dòng)畫(huà)摧茴。

如果需要按順序設(shè)置不共享相同命令的路徑的動(dòng)畫(huà)绵载，可以使用 svg.pathmorphing.js

SVG.Text 文本

text()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Text

與html不同，svg中的文本更難馴服苛白。無(wú)法創(chuàng)建流動(dòng)文本娃豹，因此應(yīng)手動(dòng)輸入換行符。在SVG.js中购裙，有兩種創(chuàng)建文本元素的方法懂版。

第一個(gè)也是最簡(jiǎn)單的方法是提供一個(gè)文本字符串，用換行符分隔：

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

這將自動(dòng)創(chuàng)建一個(gè)文本塊躏率，并在必要時(shí)插入換行符躯畴。

第二種方法可以提供更多的控制，但需要更多的代碼：

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()
})

如果您想走另一條路薇芝，并且根本不想添加tspans蓬抄，那么只需一行文本，就可以使用plain()方法來(lái)代替：

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

這是SVG.Text實(shí)例上plain方法的快捷方式夯到，它根本不呈現(xiàn)換行符嚷缭。

text.build()

returns itself

build()可用于啟用/禁用生成模式。禁用生成模式時(shí)耍贾，plain()和tspan()方法將首先調(diào)用clear()方法阅爽，然后再添加新內(nèi)容。因此逼争，當(dāng)構(gòu)建模式被啟用時(shí)优床，plain()和 tspan() 將把新的內(nèi)容追加到現(xiàn)有的內(nèi)容中。將塊傳遞給text()方法時(shí)誓焦，在調(diào)用塊之前和之后自動(dòng)切換生成模式胆敞。但在某些情況下，手動(dòng)切換可能會(huì)很有用：

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')

text.clear()

returns itself

清除調(diào)用的文本元素的所有內(nèi)容：

text.clear()

text.length()

returns number

獲取所有tspan的計(jì)算文本總長(zhǎng)度：

text.length()

text.font() as setter

returns itself

添加字體相關(guān)屬性的方便方法：

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

與attr()方法不同杂伟，font()方法也接受鍵/值對(duì)：

text.font('family', 'Menlo')

可用屬性包括：

• leading (會(huì)像setter一樣調(diào)用leading()方法)
• anchor 將設(shè)置 text-anchor 屬性)
• family (將設(shè)置 font-family 屬性)
• size (將設(shè)置 font-size 屬性)
• stretch (將設(shè)置 font-stretch 屬性)
• style (將設(shè)置 font-style 屬性)
• variant (將設(shè)置 font-variant 屬性)
• weight (將設(shè)置 font-weight 屬性)

任何其他屬性將按給定的方式應(yīng)用移层。因此，例如赫粥，letter spacing屬性將只應(yīng)用于attr()方法观话。更多關(guān)于 font-related properties here.

text.font() as getter

如您所料，font()方法還充當(dāng)getter：

var leading = text.font('leading')

text.leading() as setter

returns itself
animate yes

與html相反越平，svg沒(méi)有自然的前導(dǎo)等價(jià)物频蛔，html的前導(dǎo)由line-height定義灵迫。在svg中，行不是自然定義的晦溪。它們由具有定義行高的dy屬性和將行重置為父文本元素的x位置的x值的<tspan>節(jié)點(diǎn)定義瀑粥。但也可以在一行中有多個(gè)節(jié)點(diǎn)定義不同的y、dy三圆、x甚至dx值狞换。這給了我們很多自由，但也給了我們更多的責(zé)任舟肉。我們必須決定何時(shí)定義一條新線修噪，它從哪里開(kāi)始，它的偏移量是多少路媚，它的高度是多少黄琼。js中的leading()方法試圖通過(guò)提供更接近html的行為來(lái)減輕痛苦。與換行分隔文本結(jié)合使用時(shí)磷籍，它的工作方式與html類(lèi)似：

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

這將呈現(xiàn)一個(gè)文本元素适荣，每行有一個(gè)tspan元素，字體大小的dy值為“130%”院领。

注意弛矛，leading()方法假定文本節(jié)點(diǎn)中的每個(gè)第一級(jí)tspan代表一個(gè)新行。對(duì)一行中包含多個(gè)tspan的文本元素使用leading()（例如比然，沒(méi)有定義新行的換行tspan）將呈現(xiàn)加擾丈氓。因此，建議謹(jǐn)慎使用此方法强法，最好僅在向文本元素拋出換行分隔文本或在作為參數(shù)傳遞給文本元素的塊中添加的每個(gè)第一級(jí)tspan上調(diào)用newline()方法時(shí)使用万俗。

text.leading() as getter

returns value

獲取當(dāng)前leading值：

var leading = text.leading()

text.lines()

returns SVG.Set

所有一級(jí)tspan都可以用lines()方法引用：

text.lines()

這將返回SVG.Set的一個(gè)實(shí)例，其中包括所有tspan元素饮怯。

text.plain()

returns itself

如果元素的內(nèi)容不需要任何樣式或多行闰歪，只需添加一些純文本即可：

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

text.rebuild()

returns itself

這是一個(gè)內(nèi)部回調(diào)，可能永遠(yuǎn)不需要手動(dòng)調(diào)用蓖墅】馓龋基本上，當(dāng)修改了文本元素的font size和x屬性或leading()時(shí)论矾，它會(huì)重建文本元素教翩。此方法還充當(dāng)setter來(lái)啟用或禁用重建：

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

text.text() as setter

returns itself

還可以使用text()方法在之后更改文本：

text.text('Brilliant!')

text.text() as getter

returns string

要獲取原始文本內(nèi)容：

text.text()

text.tspan()

returns SVG.Tspan

也可以只添加一個(gè)tspan：

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

SVG.TextPath

path()

SVG.Text上的構(gòu)造函數(shù)
返回從SVG.Text繼承的SVG.TextPath

svg的一個(gè)很好的特性是能夠沿路徑運(yùn)行文本：

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)
})

var 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'

text.path(path).font({ size: 42.5, family: 'Verdana' })

在對(duì)文本元素調(diào)用path()方法時(shí)，文本元素將變?yōu)槲谋驹睾吐窂皆刂g的中間元素贪壳。從那時(shí)起饱亿，文本元素還將使用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>元素的屬性可以應(yīng)用于textPath實(shí)例本身：

text.textPath().attr('startOffset', '50%')

當(dāng)然，它們也可以動(dòng)畫(huà)化：

text.textPath().animate(3000).attr('startOffset', '80%')

注：如果給定的startOffset不是百分比，則該值表示在當(dāng)前用戶坐標(biāo)系中沿路徑測(cè)量的距離彪笼。

textPath.array()

returns SVG.PathArray

獲取基礎(chǔ)路徑的路徑數(shù)組：

var array = text.textPath().array()

textPath.plot()

returns itself
animate yes

更改textpath元素上的路徑：

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

textPath.textPath()

returns SVG.TextPath

直接引用textPath節(jié)點(diǎn)：

var textPath = text.textPath()

textPath.track()

returns SVG.Path

直接引用鏈接路徑元素：

var path = text.track()

注意：SVG.TextPath繼承自SVG.Text钻注，因此所有這些方法也都被繼承。

Events for SVG.Text

文本元素有一個(gè)事件杰扫。每次調(diào)用rebuild()方法時(shí)都會(huì)觸發(fā)它：

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

SVG.Tspan

tspan()

SVG.Text上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Tspan

tspan元素僅在文本元素或其他tspan元素中可用队寇。

text.tspan('spannened')

tspan.clear()

returns itself

清除調(diào)用的tspan元素的所有內(nèi)容：

tspan.clear()

tspan.dx()

returns itself
animate yes

定義元素的動(dòng)態(tài)x值，類(lèi)似于定義了position:relative和left的html元素：

tspan.dx(30)

tspan.dy()

returns itself
animate yes

定義元素的動(dòng)態(tài)y值章姓，類(lèi)似于定義了position:relative和top的html元素：

tspan.dy(30)

tspan.plain()

returns itself

只需添加一些純文本：

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

tspan.length()

returns number

獲取計(jì)算的文本總長(zhǎng)度：

tspan.length()

tspan.newLine()

returns itself

new line()是使用當(dāng)前leading添加具有dy屬性的新行的方便方法：

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()
})

tspan.text()

returns itself

更新tspan的內(nèi)容。這可以通過(guò)傳遞字符串來(lái)完成：

tspan.text('Just a string.')

基本上將調(diào)用plain()方法：

或者通過(guò)傳遞塊在調(diào)用的tspan中添加更具體的內(nèi)容：

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...')
  })
})

tspan.tspan()

returns SVG.Tspan

添加嵌套tspan：

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

SVG.Image 圖片

image()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Shape繼承的SVG.Image

如您所料识埋，創(chuàng)建圖像：

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

如果知道圖像的大小凡伊，則可以將這些參數(shù)作為第二個(gè)和第三個(gè)參數(shù)傳遞：

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

image.load()

returns itself

可以使用load()方法加載另一個(gè)圖像：

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

image.loaded()

returns itself

如果您不知道圖像的大小，顯然您必須等待圖像被loaded：

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

返回的·loader·對(duì)象作為加載方法的第一個(gè)參數(shù)包含四個(gè)值：

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

SVG.Gradient

gradient()

constructor on SVG.Container
returns SVG.Gradient which inherits from SVG.Container

有linear線性和radial徑向漸變窒舟。linear線性漸變的創(chuàng)建方式如下：

var gradient = draw.gradient('linear', function(stop) {
  stop.at(0, '#333')
  stop.at(1, '#fff')
})

最后系忙，要在元素上使用漸變：

rect.attr({ fill: gradient })

或者:

rect.fill(gradient)

通過(guò)將gradient實(shí)例作為任何元素的填充傳遞，將對(duì)gradient實(shí)例調(diào)用fill()方法惠豺。

MDN 有一個(gè)關(guān)于SVG漸變工作原理的很好的示例頁(yè)面银还。

gradient.at()

returns itself

stops需要offset和color參數(shù)，opacity是可選的洁墙。偏移量是介于0和1之間的浮點(diǎn)數(shù)蛹疯，或是一個(gè)百分比值（例如33%）。

stop.at(0, '#333')

或

stop.at({ offset: 0, color: '#333', opacity: 1 })

gradient.fill()

returns string

gradient.fill() //-> returns 'url(#SvgjsGradient1234)'

gradient.from()

returns itself
animate yes

要定義可以從x热监、y到x捺弦、y設(shè)置的方向，請(qǐng)執(zhí)行以下操作：

gradient.from(0, 0).to(0, 1)

“從”和“到”值也以百分比表示孝扛。

gradient.get()

returns SVG.Stop

get()方法使得從現(xiàn)有的梯度得到一個(gè)停止更容易：

var gradient = draw.gradient('radial', function(stop) {
  stop.at({ offset: 0, color: '#000', opacity: 1 })   // -> first
  stop.at({ offset: 0.5, color: '#f03', opacity: 1 }) // -> second
  stop.at({ offset: 1, color: '#066', opacity: 1 })   // -> third
})

var s1 = gradient.get(0) // -> returns "first" stop

gradient.radius()

returns itself
animate yes

徑向漸變有一個(gè)radius()方法來(lái)定義內(nèi)部顏色應(yīng)發(fā)展到的最外半徑：

var gradient = draw.gradient('radial', function(stop) {
  stop.at(0, '#333')
  stop.at(1, '#fff')
})

gradient.from(0.5, 0.5).to(0.5, 0.5).radius(0.5)

gradient.to()

returns itself
animate yes

要定義從x列吼、y到x、y的方向苦始，請(qǐng)執(zhí)行以下操作：

gradient.from(0, 0).to(0, 1)

“從”和“到”值也以百分比表示寞钥。

gradient.update()

returns itself

之后還可以更新漸變：

gradient.update(function(stop) {
  stop.at(0.1, '#333', 0.2)
  stop.at(0.9, '#f03', 1)
})

甚至可以更新一個(gè)站點(diǎn)：

var s1, s2, s3

draw.gradient('radial', function(stop) {
  s1 = stop.at(0, '#000')
  s2 = stop.at(0.5, '#f03')
  s3 = stop.at(1, '#066')
})

s1.update(0.1, '#0f0', 1)

SVG.Stop 停止

at()

SVG.Gradient上的構(gòu)造函數(shù)
返回從SVG.Element繼承的SVG.Stop

停止元素僅在漸變?cè)刂锌捎谩?/p>

var stop = gradient.at(0.5, '#f03')

或

var stop = gradient.at({ offset: 0.5, color: '#f06', opacity: 1 })

stop.update()

returns itself

采用與構(gòu)造函數(shù)相同的參數(shù)。

stop.update(0, '#333')

或

stop.update({ offset: 0, color: '#333', opacity: 1 })

SVG.Pattern 圖案

pattern()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Container繼承的SVG.Pattern

創(chuàng)建圖案與創(chuàng)建漸變非常相似：

var pattern = draw.pattern(20, 20, function(add) {
  add.rect(20,20).fill('#f06')
  add.rect(10,10)
  add.rect(10,10).move(10,10)
})

這將創(chuàng)建20 x 20像素的方格圖案陌选±碇＃可以將任何可用元素添加到模式中。

最后柠贤，要在元素上使用模式：

rect.attr({ fill: pattern })

或者:

rect.fill(pattern)

通過(guò)將模式實(shí)例作為任何元素的填充傳遞香浩，將對(duì)模式實(shí)例調(diào)用fill()方法。

pattern.fill()

returns string

pattern.fill() //-> returns 'url(#SvgjsPattern1234)'

pattern.update()

returns itself

模式也可以在之后更新：

pattern.update(function(add) {
  add.circle(15).center(10,10)
})

SVG.Mask 遮罩

mask()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Container繼承的SVG.Mask

var ellipse = draw.ellipse(80, 40).move(10, 10).fill('#fff')

var mask = draw.mask().add(ellipse)

rect.maskWith(mask)

也可以使用多個(gè)元素：

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 }).fill({ color: '#fff' })

var mask = draw.mask().add(text).add(ellipse)

rect.maskWith(mask)

maskWith()

constructor on SVG.Element
returns itself

最簡(jiǎn)單的屏蔽方法是使用單個(gè)元素：

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#fff' })

rect.maskWith(ellipse)

如果要以100%渲染遮罩對(duì)象臼勉，則需要將遮罩對(duì)象的填充顏色設(shè)置為白色邻吭。但您可能還需要使用漸變：

var gradient = draw.gradient('linear', function(stop) {
  stop.at({ offset: 0, color: '#000' })
  stop.at({ offset: 1, color: '#fff' })
})

var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: gradient })

rect.maskWith(ellipse)

mask.unmask()

returns itself

可以使用unmask()方法取消對(duì)元素的屏蔽：

rect.unmask()

unmask()方法返回masking元素。

mask.remove()

returns itself

完全刪除掩碼還將unmask()所有屏蔽元素：

mask.remove()

masker

returns SVG.Mask

為了方便起見(jiàn)宴霸，掩蔽元素也在掩蔽元素中引用囱晴。如果要更改遮罩膏蚓，這將非常有用：

rect.masker.fill('#fff')

SVG.ClipPath 剪裁

剪裁元素的工作原理與遮罩元素完全相同。唯一的區(qū)別是剪裁元素將采用剪裁元素的幾何圖形畸写。因此驮瞧，事件僅在進(jìn)入剪裁元素時(shí)觸發(fā)，而帶掩碼的元素觸發(fā)事件枯芬。另一個(gè)區(qū)別是论笔，蒙版可以用其填充顏色定義不透明度，而剪貼畫(huà)不能千所。

clip()

SVG.Container上的構(gòu)造函數(shù)
返回從SVG.Container繼承的SVG.ClipPath

多元素剪裁：

var ellipse = draw.ellipse(80, 40).move(10, 10)
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 })

var clip = draw.clip().add(text).add(ellipse)

rect.clipWith(clip)

clipWith()

returns itself

var ellipse = draw.ellipse(80, 40).move(10, 10)

rect.clipWith(ellipse)

clipPath.unclip()

returns itself

可以使用unfree()方法釋放元素：

rect.unclip()

clipPath.remove()

returns itself

Removing the clip alltogether will also unclip() all clipped elements as well:

clip.remove()

clipper

returns SVG.ClipPath

為了方便起見(jiàn)狂魔，剪裁元素也在剪裁元素中引用。如果要更改clipPath淫痰，這可能很有用：

rect.clipper.move(10, 10)

SVG.Use 使用

use()

SVG.Container上的構(gòu)造函數(shù)
返回SVG.Use最楷，它繼承自SVG.Shape

使用元素簡(jiǎn)單地模擬另一個(gè)現(xiàn)有元素。對(duì)master元素的任何更改都將反映在所有use實(shí)例上待错。use()的用法非常簡(jiǎn)單：

var rect = draw.rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

在上面的示例中籽孙，svg圖形中將顯示兩個(gè)rect，即原始實(shí)例和use實(shí)例火俄。在某些情況下犯建，可能需要隱藏原始元素。最好的方法是在defs節(jié)點(diǎn)中創(chuàng)建原始元素：

var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)

這樣烛占，rect元素充當(dāng)庫(kù)元素胎挎。你可以編輯它，但它不會(huì)被渲染忆家。

另一種方法是指向外部SVG文件犹菇，只需指定元素'id'和文件路徑。

var use  = draw.use('elementId', 'path/to/file.svg')

當(dāng)您已經(jīng)創(chuàng)建了復(fù)雜的圖像時(shí)芽卿，這種方法非常有用揭芍。
注意，對(duì)于外部圖像（在域之外）卸例，可能需要使用XHR加載文件称杨。

SVG.Marker

marker()

constructor on SVG.Container
returns SVG.Marker which inherits from SVG.Container

標(biāo)記可以添加到line、polyline筷转、polygon和path的每個(gè)單獨(dú)點(diǎn)姑原。有三種類(lèi)型的標(biāo)記：start, mid 和 end。其中start表示第一個(gè)點(diǎn)呜舒，end表示最后一個(gè)點(diǎn)锭汛，mid表示中間的每個(gè)點(diǎn)。

var path = draw.path('M0 0 A50 50 0 0 1 50 50 A50 50 0 0 0 100 100')

path.fill('none').move(20, 20).stroke({ width: 1, color: '#ccc' })

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})
path.marker('mid', 10, 10, function(add) {
  add.rect(5, 10).cx(5).fill('#ccc')
})
path.marker('end', 20, 20, function(add) {
  add.circle(6).center(4, 5)
  add.circle(6).center(4, 15)
  add.circle(6).center(12, 10)

  this.fill('#0f9')
})

marker()方法有三種用法。首先唤殴，可以在任何容器元素（例如svg, nested, group等）上創(chuàng)建標(biāo)記般婆。如果您計(jì)劃多次重復(fù)使用標(biāo)記，這將非常有用朵逝，因此它將在defs中創(chuàng)建標(biāo)記蔚袍，但尚未顯示：

var marker = draw.marker(10, 10, function(add) {
  add.rect(10, 10)
})

其次，可以創(chuàng)建一個(gè)標(biāo)記并直接應(yīng)用于其目標(biāo)元素：

path.marker('start', 10, 10, function(add) {
  add.circle(10).fill('#f06')
})

這將在defs中創(chuàng)建一個(gè)標(biāo)記并直接應(yīng)用它配名。注意啤咽，第一個(gè)參數(shù)定義了標(biāo)記的位置，第一個(gè)示例中有四個(gè)參數(shù)段誊，而不是三個(gè)闰蚕。

最后，如果創(chuàng)建了標(biāo)記以便在容器元素上重用连舍，則可以將其直接應(yīng)用于目標(biāo)元素：

path.marker('mid', marker)

最后，要從目標(biāo)元素引用中獲取標(biāo)記實(shí)例涩哟，請(qǐng)執(zhí)行以下操作：

path.reference('marker-end')

marker.height()

returns itself
animate yes

定義·markerHeight·屬性：

marker.height(10)

marker.ref()

returns itself

默認(rèn)情況下索赏，標(biāo)記的refX和refY屬性分別設(shè)置為width和height值的一半。要以不同方式定義標(biāo)記的refX和refY：

marker.ref(2, 7)

marker.size()

returns itself
animate yes

定義markerWidth和markerHeight屬性：

marker.size(10, 10)

marker.update()

returns itself

更新標(biāo)記的內(nèi)容將clear()清除現(xiàn)有內(nèi)容并添加作為第一個(gè)參數(shù)傳遞的塊中定義的內(nèi)容：

marker.update(function(add) {
  add.circle(10)
})

marker.width()

returns itself
animate yes

定義markerWidth屬性：

marker.width(10)

SVG.Bare 開(kāi)放類(lèi)

對(duì)于SVG.js沒(méi)有描述的所有SVG元素贴彼，SVG.Bare類(lèi)都很方便潜腻。這個(gè)類(lèi)直接繼承自SVG.Element，可以在單獨(dú)的命名空間中添加自定義方法器仗，而不會(huì)污染主SVG.Element命名空間融涣。把它當(dāng)成你的私人游樂(lè)場(chǎng)。

element()

returns SVG.Bare which inherits from SVG.Element

SVG.Bare類(lèi)可以在任何父元素上用element()方法實(shí)例化：

var element = draw.element('title')

作為第一個(gè)參數(shù)傳遞的字符串值是應(yīng)該生成的節(jié)點(diǎn)名精钮。

另外威鹿，任何現(xiàn)有類(lèi)名都可以作為第二個(gè)參數(shù)傳遞，以定義元素應(yīng)該繼承哪個(gè)類(lèi)：

var element = draw.element('symbol', SVG.Parent)

這給了你作為用戶很大的權(quán)力轨香。但請(qǐng)記住忽你，有了強(qiáng)大的力量，就有了偉大的責(zé)任臂容。

element.words()

returns itself

SVG.Bare實(shí)例附帶了一個(gè)添加純文本的附加方法：

var element = draw.element('title').words('This is a title.')
//-> <title>This is a title.</title>