Elements

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

SVG.Rect 矩形

rect()

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

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

var rect = draw.rect(100, 100)

rect.radius()

returns itself
animate yes

矩形也可以有圓角：

rect.radius(10)

這將把rx和ry屬性設置為10。要分別設置rx和ry：

rect.radius(10, 20)

SVG.Circle 圓形

circle()

SVG.Container上的構造函數(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上的構造函數(shù)
返回從SVG.Shape繼承的SVG.Circle

橢圓有兩個參數(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上的構造函數(shù)
返回從SVG.Shape繼承的SVG.Line

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

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

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

line.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實例。這種方法相當適合內部使用：

polyline.array() 

更多信息: SVG.PointArray.

line.plot() 繪制

returns itself
animate yes

使用plot()方法更新行：

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

或者，它還接受一個點字符串：

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

或數(shù)組：

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

或者SVG.PointArray的一個實例：

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

plot()方法也可以設置動畫：

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

SVG.Polyline 折線

polyline()

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

polyline元素定義一組連接的直線段。通常，多段線元素定義開放形狀：

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

多段線字符串由逗號或空格分隔的點列表組成。所以x,yx,yx,y以及x,yx,y，甚至x,y,x,y,x,y都會起作用。

作為替代方案，點數(shù)組也可以工作：

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

或者甚至是一個平面點陣列，這是首選：

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

polyline.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實例。這種方法相當適合內部使用：

polyline.array()

More info: SVG.PointArray.

polyline.clear() 清除

returns itself

解析給定點數(shù)據(jù)時，將緩存結果。此方法清除緩存。

polyline.clear()

polyline.plot() 繪制

returns itself
animate yes

多段線可以使用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]])

SVG.Polygon 多邊形

polygon()

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

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

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

多邊形字符串或數(shù)組與多段線字符串完全相同。不需要關閉形狀，因為第一個和最后一個點將自動連接。

polygon.array() 數(shù)組

returns SVG.PointArray

引用SVG.PointArray實例。這種方法相當適合內部使用：

polygon.array()

More info: SVG.PointArray.

polygon.clear() 清除

returns itself

解析給定點數(shù)據(jù)時，將緩存結果。此方法清除緩存。

polygon.clear()

polygon.plot() 繪制

returns itself
animate yes

與多段線一樣，可以使用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]])

SVG.Path 路徑

path()

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

路徑字符串類似于多邊形字符串，但為了支持曲線，它要復雜得多：

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

有關路徑數(shù)據(jù)字符串的詳細信息，請參閱 SVG documentation on path data.

path.array()

returns SVG.PathArray

引用SVG.PathArray實例。這種方法相當適合內部使用：

path.array()

More info: SVG.PathArray.

path.clear()

returns itself

解析給定的路徑數(shù)據(jù)時，將緩存結果。此方法清除緩存。

path.clear()

path.length()

returns number

獲取路徑元素的總長度：

var length = path.length()

path.pointAt()

returns SVGPoint

在給定長度的路徑上獲取點：

var point = path.pointAt(105)

注意：pointAt()返回本機的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()方法也可以設置動畫：

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

SVG.js中的路徑設置動畫只有基本支持，這意味著只有具有相同命令（M、C、S等）的路徑才可以設置動畫。

如果需要按順序設置不共享相同命令的路徑的動畫，可以使用 svg.pathmorphing.js

SVG.Text 文本

text()

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

與html不同，svg中的文本更難馴服。無法創(chuàng)建流動文本，因此應手動輸入換行符。在SVG.js中，有兩種創(chuàng)建文本元素的方法。

第一個也是最簡單的方法是提供一個文本字符串，用換行符分隔：

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

這將自動創(chuàng)建一個文本塊，并在必要時插入換行符。

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

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()方法來代替：

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

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

text.build()

returns itself

build()可用于啟用/禁用生成模式。禁用生成模式時，plain()和tspan()方法將首先調用clear()方法，然后再添加新內容。因此，當構建模式被啟用時，plain()和 tspan() 將把新的內容追加到現(xiàn)有的內容中。將塊傳遞給text()方法時，在調用塊之前和之后自動切換生成模式。但在某些情況下，手動切換可能會很有用：

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

清除調用的文本元素的所有內容：

text.clear()

text.length()

returns number

獲取所有tspan的計算文本總長度：

text.length()

text.font() as setter

returns itself

添加字體相關屬性的方便方法：

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

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

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

可用屬性包括：

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

任何其他屬性將按給定的方式應用。因此，例如，letter spacing屬性將只應用于attr()方法。更多關于 font-related properties here.

text.font() as getter

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

var leading = text.font('leading')

text.leading() as setter

returns itself
animate yes

與html相反，svg沒有自然的前導等價物，html的前導由line-height定義。在svg中，行不是自然定義的。它們由具有定義行高的dy屬性和將行重置為父文本元素的x位置的x值的<tspan>節(jié)點定義。但也可以在一行中有多個節(jié)點定義不同的y、dy、x甚至dx值。這給了我們很多自由，但也給了我們更多的責任。我們必須決定何時定義一條新線，它從哪里開始，它的偏移量是多少，它的高度是多少。js中的leading()方法試圖通過提供更接近html的行為來減輕痛苦。與換行分隔文本結合使用時，它的工作方式與html類似：

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

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

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

text.leading() as getter

returns value

獲取當前leading值：

var leading = text.leading()

text.lines()

returns SVG.Set

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

text.lines()

這將返回SVG.Set的一個實例，其中包括所有tspan元素。

text.plain()

returns itself

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

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

text.rebuild()

returns itself

這是一個內部回調，可能永遠不需要手動調用?；旧希斝薷牧宋谋驹氐?code>font size和x屬性或leading()時，它會重建文本元素。此方法還充當setter來啟用或禁用重建：

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

要獲取原始文本內容：

text.text()

text.tspan()

returns SVG.Tspan

也可以只添加一個tspan：

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

SVG.TextPath

path()

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

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

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

在對文本元素調用path()方法時，文本元素將變?yōu)槲谋驹睾吐窂皆刂g的中間元素。從那時起，文本元素還將使用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', '50%')

當然，它們也可以動畫化：

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

注：如果給定的startOffset不是百分比，則該值表示在當前用戶坐標系中沿路徑測量的距離。

textPath.array()

returns SVG.PathArray

獲取基礎路徑的路徑數(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é)點：

var textPath = text.textPath()

textPath.track()

returns SVG.Path

直接引用鏈接路徑元素：

var path = text.track()

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

Events for SVG.Text

文本元素有一個事件。每次調用rebuild()方法時都會觸發(fā)它：

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

SVG.Tspan

tspan()

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

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

text.tspan('spannened')

tspan.clear()

returns itself

清除調用的tspan元素的所有內容：

tspan.clear()

tspan.dx()

returns itself
animate yes

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

tspan.dx(30)

tspan.dy()

returns itself
animate yes

定義元素的動態(tài)y值，類似于定義了position:relative和top的html元素：

tspan.dy(30)

tspan.plain()

returns itself

只需添加一些純文本：

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

tspan.length()

returns number

獲取計算的文本總長度：

tspan.length()

tspan.newLine()

returns itself

new line()是使用當前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的內容。這可以通過傳遞字符串來完成：

tspan.text('Just a string.')

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

或者通過傳遞塊在調用的tspan中添加更具體的內容：

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上的構造函數(shù)
返回從SVG.Shape繼承的SVG.Image

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

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

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

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

image.load()

returns itself

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

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·對象作為加載方法的第一個參數(shù)包含四個值：

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

通過將gradient實例作為任何元素的填充傳遞，將對gradient實例調用fill()方法。

MDN 有一個關于SVG漸變工作原理的很好的示例頁面。

gradient.at()

returns itself

stops需要offset和color參數(shù)，opacity是可選的。偏移量是介于0和1之間的浮點數(shù)，或是一個百分比值（例如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設置的方向，請執(zhí)行以下操作：

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

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

gradient.get()

returns SVG.Stop

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

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

徑向漸變有一個radius()方法來定義內部顏色應發(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的方向，請執(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)
})

甚至可以更新一個站點：

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上的構造函數(shù)
返回從SVG.Element繼承的SVG.Stop

停止元素僅在漸變元素中可用。

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

或

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

stop.update()

returns itself

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

stop.update(0, '#333')

或

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

SVG.Pattern 圖案

pattern()

SVG.Container上的構造函數(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)

通過將模式實例作為任何元素的填充傳遞，將對模式實例調用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上的構造函數(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)

也可以使用多個元素：

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

最簡單的屏蔽方法是使用單個元素：

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

rect.maskWith(ellipse)

如果要以100%渲染遮罩對象，則需要將遮罩對象的填充顏色設置為白色。但您可能還需要使用漸變：

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()方法取消對元素的屏蔽：

rect.unmask()

unmask()方法返回masking元素。

mask.remove()

returns itself

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

mask.remove()

masker

returns SVG.Mask

為了方便起見，掩蔽元素也在掩蔽元素中引用。如果要更改遮罩，這將非常有用：

rect.masker.fill('#fff')

SVG.ClipPath 剪裁

剪裁元素的工作原理與遮罩元素完全相同。唯一的區(qū)別是剪裁元素將采用剪裁元素的幾何圖形。因此，事件僅在進入剪裁元素時觸發(fā)，而帶掩碼的元素觸發(fā)事件。另一個區(qū)別是，蒙版可以用其填充顏色定義不透明度，而剪貼畫不能。

clip()

SVG.Container上的構造函數(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

為了方便起見，剪裁元素也在剪裁元素中引用。如果要更改clipPath，這可能很有用：

rect.clipper.move(10, 10)

SVG.Use 使用

use()

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

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

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

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

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

這樣，rect元素充當庫元素。你可以編輯它，但它不會被渲染。

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

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

當您已經創(chuàng)建了復雜的圖像時，這種方法非常有用。
注意，對于外部圖像（在域之外），可能需要使用XHR加載文件。

SVG.Marker

marker()

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

標記可以添加到line、polyline、polygon和path的每個單獨點。有三種類型的標記：start, mid 和 end。其中start表示第一個點，end表示最后一個點，mid表示中間的每個點。

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)建標記。如果您計劃多次重復使用標記，這將非常有用，因此它將在defs中創(chuàng)建標記，但尚未顯示：

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

其次，可以創(chuàng)建一個標記并直接應用于其目標元素：

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

這將在defs中創(chuàng)建一個標記并直接應用它。注意，第一個參數(shù)定義了標記的位置，第一個示例中有四個參數(shù)，而不是三個。

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

path.marker('mid', marker)

最后，要從目標元素引用中獲取標記實例，請執(zhí)行以下操作：

path.reference('marker-end')

marker.height()

returns itself
animate yes

定義·markerHeight·屬性：

marker.height(10)

marker.ref()

returns itself

默認情況下，標記的refX和refY屬性分別設置為width和height值的一半。要以不同方式定義標記的refX和refY：

marker.ref(2, 7)

marker.size()

returns itself
animate yes

定義markerWidth和markerHeight屬性：

marker.size(10, 10)

marker.update()

returns itself

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

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

marker.width()

returns itself
animate yes

定義markerWidth屬性：

marker.width(10)

SVG.Bare 開放類

對于SVG.js沒有描述的所有SVG元素，SVG.Bare類都很方便。這個類直接繼承自SVG.Element，可以在單獨的命名空間中添加自定義方法，而不會污染主SVG.Element命名空間。把它當成你的私人游樂場。

element()

returns SVG.Bare which inherits from SVG.Element

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

var element = draw.element('title')

作為第一個參數(shù)傳遞的字符串值是應該生成的節(jié)點名。

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

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

這給了你作為用戶很大的權力。但請記住，有了強大的力量，就有了偉大的責任。

element.words()

returns itself

SVG.Bare實例附帶了一個添加純文本的附加方法：

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