svg.js中文文档（粗略版）

用于操纵和动画SVG的轻量级库。

SVG.js没有依赖关系，其目标是尽可能小，同时提供接近完整的SVG规范覆盖范围。如果您还不确定，这里有几点重点。

SVG.js很快。显然不如普通js快，但比竞争对手快很多倍：

more...

关于大小，位置，变换，颜色，...的动画
模块化结构，轻松扩展
各种有用的插件可用
形状类型之间具有移动，大小，中心 ...
将事件绑定到元素
完全支持不透明蒙版和剪切路径
文本路径，甚至动画
元素组
动态渐变和图案
充分记录（您正在查看:)

源码准备

npm install @svgdotjs/svg.js

快速开始

import { SVG } from '@svgdotjs/svg.js'

创建一个SVG文档

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

您可以将任何CSS选择器传递addTo给节点，也可以仅传递给节点。

SVG.js不会自动为文档设置大小。因此，请确保size()使用适当的值进行调用。例如，将尺寸设置为其父级的尺寸，请使用以下命令：

var draw = SVG().addTo('#someId').size('100%', '100%')

等待DOM加载

SVG.on(document, 'DOMContentLoaded', function() {
  var draw = SVG().addTo('body')
})

纯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>

SVG（）函数

该函数不仅可以创建新文档，还可以从dom中检索svg.js对象，或从svg片段中创建新对象：

// new document
var draw = SVG()

// get rect from dom
var rect = SVG('#myRectId')
// or
var rect = SVG('rect')
// any css selector will do
var path = SVG('#group1 path.myClass')

// create new object from fragment
var circle = SVG('<circle>')

// convert node to svg.js object
var obj = SVG(node)

// initialize SVG.js
var draw = SVG().addTo('body')

// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')

API

容器元素

SVG.Container类是所有可以包含其他元素的元素的基本包装器。

继承堆栈是 SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element>SVG.Container

SVG

Js 主初始化器函数在给定元素中创建一个根 svg 节点，并返回一个 svg 实例。

svg()

返回从 SVG.Container 继承的 svg

var draw = SVG().addTo('#drawing')

注意: 第一次调用 SVG ()时，将创建第二个不可见的 < SVG > 。这是我们在 FAQ 中解释的解析器。

还可以在另一个 SVG 文档中创建一个 SVG 文档，然后称之为嵌套的 SVG 文档:

nested()

构造函数返回从 svg 容器继承的 svg. svg

var nested = draw.nested()

var rect = nested.rect(200, 200)

G

如果希望将一组元素视为一个元素进行转换，则对元素进行分组可能很有用。在一个组中的所有元素，保持它们相对于它们所属组的位置。

注意: 组没有他们自己的几何图形，它是从他们的内容继承而来的。因此，组不侦听 x、 y、 width 和 height 属性。如果这正是您要寻找的，那么可以使用嵌套的() svg。

group()

构造函数返回从 svg 容器继承的 svg

一个组具有与根 SVG 文档相同的所有元素方法:

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

SVG 文档中的现有元素也可以添加到组中:

add()

group.add(rect)

Symbol

返回从 SVG.Container 继承的 SVG.Symbol

与 group 元素不同，symbol 元素是一个 container 元素。符号和组之间的唯一区别是不呈现符号。因此，符号元素与 use 元素结合是理想的:

var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')

var use  = draw.use(symbol).move(200, 200)

Defs

元素是被引用元素的容器。不直接呈现 < defs > 节点的子代。< defs > 节点位于主 < svg > 文档中，可以使用 defs ()方法访问它。

defs()

构造函数返回从 SVG.Container 继承的 SVG.Defs

var defs = draw.defs()

root()

Defs 也可以通过 root ()方法在任何其他元素上使用:

var defs = rect.root().defs()

Defs 节点的工作方式与组完全相同。

A

创建一个将在所有子元素上激活的超链接。

Link ()

返回从 SVG.Container 继承的 SVG.A

一个超链接或者 < a > 标签创建一个容器，在所有的孩子上启用一个链接:

var link = draw.link('http://svgdotjs.github.io/')
var rect = link.rect(100, 100)

to()

链接 url 可以使用 to ()方法更新:

link.to('http://apple.com')

target()

此外，link 元素有一个 target ()方法来创建 target 属性:

link.target('_blank')

linkTo()

元素也可以通过 linkTo ()方法反向链接:

rect.linkTo('http://svgdotjs.github.io/')

或者，可以传递一个块来代替链接元素上更多选项的 URL:

rect.linkTo(function(link) {
  link.to('http://svgdotjs.github.io/').target('_blank')
})

SVG

svg.js元素的常规处理

Creating SVG Elements

在svg.js中，每个元素都是一个对象，可以通过构造它来创建它：

import { Rect } from "@svgdotjs/svg.js"
var rect = new Rect().size(100, 100).addTo(draw)
// or to reuse an existing node
var rect = new Rect(node).size(100, 100)

或通过在容器上使用构造函数方法：

var rect = draw.rect(100, 100)

尽管最后一个示例将构造的元素直接附加到容器，但必须在前一个示例（addTo）中手动完成。因此，构造裸露的svg.js对象是为了进行精细控制，通常不需要这样做。

使用属性创建SVG元素

svg.js允许通过attr()方法或调用专门的方法（例如）来更改属性move()。但是，通常更容易直接在构造上传递属性：

var rect = new Rect({width: 100, height: 100}).addTo(draw)
// or
var rect = draw.rect({width: 100, height: 100})

这是attr()构造后调用的简写。

Dom

SVG.Dom是svg.js创建的所有dom元素的基本原型。它提供了简单的dom功能，例如attr()HTML元素，并可与HTML元素一起使用。对于SVG.js未描述的所有元素，SVG.Dom该类也很方便。

element()

returns SVG.Dom

该SVG.Dom类别可以利用被实例化element()的任何元件上的方法：

var element = draw.element('title')

作为第一个参数传递的字符串值是应生成的节点名称。

words()

returns itself

该SVG.Dom实例带有其他方法来添加纯文本：

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

rect()

constructor on SVG.Container returns SVG.Rect which inherits from SVG.Shape

Rect有两个参数，它们的width和height：

var rect = draw.rect(100, 100)

radius()

returns itself animate yes

矩形也可以具有圆角：

rect.radius(10)

这会将rxand ry属性设置为10。要设置rx和ry独立：

rect.radius(10, 20)

circle()

constructor on SVG.Container returns SVG.Circle which inherits from SVG.Shape

圆唯一需要的参数是直径：

var circle = draw.circle(100)

radius()

returns itself animate yes

circle.radius(75)

ellipse()

constructor on SVG.Container returns SVG.Circle which inherits from SVG.Shape

椭圆有两个参数，它们的width和height：

var ellipse = draw.ellipse(200, 100)

radius()

returns itself animate yes

椭圆也可以通过半径重新定义：

ellipse.radius(75, 50)

line()

constructor on SVG.Container returns SVG.Line which inherits from SVG.Shape

创建一条从点A到点B的线：

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

创建线元素可以通过四种方式完成。查看该plot()方法以查看所有可能性。

array()

returns SVG.PointArray

引用SVG.PointArray实例。此方法仅供内部使用：

polyline.array()

更多信息：SVG.PointArray。

plot()

returns itself animate yes

使用以下plot()方法完成一行的更新：

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

或者，它也接受一个点字符串：

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

或点数组：

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

polyline()

constructor on SVG.Container returns SVG.Polyine which inherits from SVG.Shape

折线元素定义了一组连接的直线段。通常，折线元素定义开放形状：

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

折线字符串由用逗号或空格分隔的点列表组成。因此x,y x,y x,y，x y x y x y甚至x,y,x,y,x,y将工作。

另外，也可以使用一系列的点：

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

甚至是首选的平面排列点：

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

array()

returns SVG.PointArray

引用SVG.PointArray实例。此方法仅供内部使用：

polyline.array()

更多信息：SVG.PointArray。

clear()

returns itself

解析给定点数据时，将缓存结果。此方法清除缓存。

polyline.clear()

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

polygon() 多边形

constructor on SVG.Container returns SVG.Polygon which inherits from SVG.Shape

与折线元素不同，多边形元素定义了一个封闭形状，该形状由一组连接的直线段组成：

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

多边形字符串或数组与折线字符串完全相同。无需闭合形状，因为将自动连接第一个和最后一个点。

array()

returns SVG.PointArray

引用SVG.PointArray实例。此方法仅供内部使用：

polygon.array()

更多信息：SVG.PointArray。

clear()

returns itself

When the given point data is parsed, the result is cached. This method clears the cache.

polygon.clear()

plot()

returns itself animate yes

Like polylines, polygons can be updated using the plot() method:

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

The plot() method can also be animated:

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

path()

constructor on SVG.Container returns SVG.Path which inherits from SVG.Shape

路径字符串类似于多边形字符串，但为了支持曲线而更加复杂：

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

有关路径数据字符串的更多详细信息，请参阅有关路径数据的SVG文档。

array()

returns SVG.PathArray

引用SVG.PathArray实例。此方法仅供内部使用：

path.array()

更多信息：SVG.PathArray。

clear()

returns itself

解析给定的路径数据时，将缓存结果。此方法清除缓存。

path.clear()

length()

returns number

获取路径元素的总长度：

var length = path.length()

pointAt()

returns SVG.Point

在给定长度的路径上获取点：

var point = path.pointAt(105)

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等等）是animateable。

text()

returns SVG.TextPath

可以使用以下text()方法来创建带有链接到当前路径的文本路径的文本元素：

var textpath = path.text('SVG.js rocks!')

text()

constructor on SVG.Container returns SVG.Text which inherits from SVG.Shape

与html不同，svg中的文本更难驯服。无法创建流畅的文本，因此应手动输入换行符。在SVG.js中，有两种创建文本元素的方法。

第一种也是最简单的方法是提供一个由换行符分隔的文本字符串：

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

这将自动创建一个文本块，并在必要时插入换行符。

第二种方法将为您提供更多控制权，但需要更多代码：

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，只需一行文本，则可以改用以下plain()方法：

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

这是实例上plain方法的快捷方式，该方法SVG.Text根本不显示换行符。

build()

returns itself

的build()可用于启用/禁用构建模式。在禁用构建模式的情况下，plain()and tspan()方法将clear()在添加新内容之前先调用该方法。所以，当启用的构建模式，plain()并tspan()会追加新的内容，以现有的内容。将块传递给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')

clear()

returns itself

清除被调用文本元素的所有内容：

text.clear()

length()

returns number

一起获得所有tspan的总计算文本长度：

text.length()

font() as setter

returns itself

一种添加字体相关属性的便捷方法：

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

与attr()方法不同，该font()方法还接受键/值对：

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

可用属性为：

leading（与调用leading()setter 的方法相同）
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() as getter

正如您可能期望的那样，该font()方法还可以充当吸气剂：

var leading = text.font('leading')

leading() as setter

returns itself animate yes

与html相反line-height，svg的领先地位由定义，而svg没有自然的领先地位。在svg中，线条不是自然定义的。它们由<tspan>节点定义，这些节点具有dy定义行高的属性和x将行重置x为父文本元素位置的值。但你也可以在一行中的多个节点定义不同y，dy，x甚至dx价值。这给了我们很多自由，也给我们带来了更多的责任。我们必须决定何时定义新行，从何处开始，其偏移量和高度。leading()SVG.js中的方法试图通过使您的行为更接近html来减轻痛苦。与换行符分隔的文本结合使用，它的工作原理类似于html：

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

这将为每行呈现一个tspan元素的文本元素，其dy值为130%字体大小。

注意，该leading()方法假定文本节点中的每个第一级tspan都代表一个新行。leading()在一行中包含多个tspan的文本元素上使用（例如，如果没有包装tspan定义新行），则将出现混乱。因此，建议谨慎使用此方法，最好仅当在文本元素newLine()上添加换行符分隔的文本或在作为参数传递给文本元素的块中添加的每个第一级tspan上调用该方法时。

leading() as getter

returns value

获取当前的领先价值：

var leading = text.leading()

path()

returns SVG.TextPath

在文本元素中创建textPath并返回textPath：

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'

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

textPath()

要获取文本中的文本路径，请使用textPath()：

var textpath = text.textPath().attr('startOffset', '50%')

plain()

returns itself

如果元素的内容不需要任何样式或多行，则只需添加一些纯文本即可：

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

rebuild()

returns itself

这是一个内部回调，可能永远不需要手动调用。基本上，当erver font-size和文本元素的x属性或属性leading()被修改时，它将重建文本元素。此方法还充当设置器，以启用或禁用重建：

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

text() as setter()

returns itself

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

text.text('Brilliant!')

text() as getter()

returns string

要获取原始文本内容：

text.text()

tspan()

returns SVG.Tspan

也可以仅添加一个tspan：

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

textPath()

constructor on SVG.Container returns SVG.TextPath which inherits from SVG.Text

要沿路径构造文本，textPath()可以使用构造函数：

var textpath = draw.textPath('Some Text along a 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')

注意：如果startOffset给出的百分比不是百分数，则该值表示沿当前用户坐标系中测量的路径的距离。

array()

returns SVG.PathArray

获取基础路径的路径数组：

var array = textpath.array()

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

returns SVG.TextPath

直接引用textPath节点：

var textPath = text.textPath()

track()

returns SVG.Path

直接引用链接的路径元素：

var path = textpath.track()

SVG.Text的事件

文本元素有一个事件。每次rebuild()调用该方法时都会触发：

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

tspan()

constructor on SVG.Text returns SVG.Tspan which inherits from SVG.Text

tspan元素仅在text元素内部或其他tspan元素内部可用。

text.tspan('spannened')

clear()

returns itself

清除被调用的tspan元素的所有内容：

tspan.clear()

dx()

returns itself animate yes

定义x元素的动态值，就像使用position:relative和left定义的html元素一样：

tspan.dx(30)

dy()

returns itself animate yes

定义y元素的动态值，就像使用position:relative和top定义的html元素一样：

tspan.dy(30)

plain()

returns itself

只需添加一些纯文本即可：

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

length()

returns number

获取总的计算文本长度：

tspan.length()

newLine()

returns itself

这newLine()是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()
})

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

returns SVG.Tspan

添加嵌套的tspan：

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

image()

constructor on SVG.Container returns SVG.Image which inherits from SVG.Shape

如您所期望的那样创建图像：

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

如果要在加载图像后执行回调，则可以将函数作为附加参数传递：

var image = draw.image('/path/to/image.jpg', function (event) {
  // image loaded
  // this is the loading event for the underlying img element
  // you can access the natural width and height of the image with
  // event.target.naturalWidth, event.target.naturalHeight
})

load()

returns itself

可以使用以下load()方法来加载另一个图像：

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

图片事件

您可以在加载图像时绑定到load和error事件。可以像往常一样使用on：

image.on('load', function (e) {
  // this is the loading event for the svg image
})

gradient() 渐变

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

有linear和radial渐变。该linear梯度可以这样产生：

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

最后，对元素使用渐变：

rect.attr({ fill: gradient })

要么：

rect.fill(gradient)

MDN上有一个很好的示例页面，介绍了SVG渐变的工作方式。

stop()

returns itself

在offset和color参数都需要止损，opacity是可选的。偏移量是0和之间的浮点数1，或者是百分比值（例如33%）。

gradient.stop(0, '#333')

要么

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

url()

returns string

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

from()

returns itself animate yes

要定义你可以从设定的方向x，y以及x，y：

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

from和to值也以百分比表示。

get()

returns SVG.Stop

该get()方法使从现有渐变停止变得更加容易：

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

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

radius()

returns itself animate yes

径向渐变有一种radius()方法可以定义最外半径，以使内部颜色发展到该半径：

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

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

to()

returns itself animate yes

要定义你可以从设定的方向x，y以及x，y：

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

from和to值也以百分比表示。

update()

returns itself

渐变也可以随后进行更新：

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

甚至一站式服务都可以更新：

var s1, s2, s3

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

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

stop()

at()

constructor on SVG.Gradient returns SVG.Stop which inherits from SVG.Element

停止元素仅在渐变元素内部可用。

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

要么

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

update()

returns itself

采用与构造函数相同的参数。

stop.update(0, '#333')

要么

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

pattern()

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

创建图案与创建渐变非常相似：

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

这将创建20 x 20像素的方格图案。您可以将任何可用的元素添加到图案中。

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

rect.attr({ fill: pattern })

要么：

rect.fill(pattern)

url()

returns string

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

update()

returns itself

之后也可以更新模式：

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

mask()

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

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(add) {
  add.stop({ offset: 0, color: '#000' })
  add.stop({ offset: 1, color: '#fff' })
})

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

rect.maskWith(ellipse)

unmask()

returns itself

可以使用以下unmask()方法来取消隐藏元素：

rect.unmask()

该unmask()方法返回masking元素。

remove()

returns itself

完全删除遮罩也将同时unmask()遮盖所有遮罩元素：

mask.remove()

element.masker()

returns SVG.Mask

For your convenience, the masking element is also referenced in the masked element. This can be useful in case you want to change the mask:

rect.masker().fill('#fff')

ClipPath

剪贴元素的作用与遮罩元素完全相同。唯一的区别是，被裁剪的元素将采用裁剪元素的几何形状。因此，仅当输入剪贴元素时才触发事件，而使用蒙版的被蒙版元素会触发事件。另一个区别是，蒙版可以使用其填充颜色来定义不透明度，而clipPaths不能。

clip()

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

剪辑有多个元素：

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

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

剪辑有多个元素：

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)

unclip()

returns itself

可以使用以下unclip()方法完成元素的剪切：

rect.unclip()

remove()

returns itself

一起删除剪辑也将同时删除unclip()所有剪辑的元素：

clip.remove()

clipper()

returns SVG.ClipPath

为了您的方便，在剪贴元素中也引用了剪贴元素。如果您想更改clipPath，这将很有用：

rect.clipper().move(10, 10)

use()

constructor on SVG.Container returns SVG.Use which inherits from SVG.Shape

use元素仅模拟另一个现有元素。主元素上的任何更改都将反映在所有use实例上。的用法use()非常简单：

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

在上述示例的情况下，svg图形上将出现两个矩形，原始矩形和use实例。在某些情况下，您可能希望隐藏原始元素。最好的方法是在defs节点中创建原始元素：

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

当您已经创建了复杂的图像时，这种方法很有用。请注意，对于外部映像（您的域外），可能需要使用XHR加载文件。

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，嵌套，组等）上创建标记。如果您打算多次重复使用标记，这将很有用，因此它将在defs中创建一个标记，但尚未显示它：

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

其次，可以创建标记并将其直接应用于其目标元素：

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

这将在defs中创建一个标记并直接应用它。请注意，第一个参数定义了标记的位置，并且有四个参数，而第一个示例则为三个。

最后，如果创建了可在容器元素上重用的标记，则可以将其直接应用于目标元素：

path.marker('mid', marker)

最后，要从目标元素引用中获取标记实例：

path.reference('marker-end')

height()

returns itself animate yes

定义markerHeight属性：

marker.height(10)

ref()

returns itself

默认情况下，标记的refX和refY属性分别设置为width和height值的一半。要不同地定义标记的refX和refY：

marker.ref(2, 7)

size()

returns itself animate yes

定义markerWidth和markerHeight属性：

marker.size(10, 10)

update()

returns itself

更新标记的内容将保留clear()现有内容，并添加在作为第一个参数传递的块中定义的内容：

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

width()

returns itself animate yes

定义markerWidth属性：

marker.width(10)

style

style()

样式元素为选择器创建样式标签和atts规则

constructor on SVG.Container returns SVG.Style which inherits from SVG.Element

var style = draw.style('#myId', {color: 'blue'})

fontface()

constructor on SVG.Container returns SVG.Style which inherits from SVG.Element

var style = draw.fontface('Arial', 'url', {...otherParameters})

rule()

向样式标签添加另一个规则：

var style = draw.style('#myId', {color: 'blue'})
style.rule('.myClass', {fontSize: 16})

font()

向样式标签添加另一种字体：

var style = draw.style('#myId', {color: 'blue'})
style.font('Arial', 'url', {...otherParameters})

foreignObject()

constructor on SVG.Container returns SVG.ForeignObject which inherits from SVG.Element

var foreignObject = draw.foreignObject(width, height)
foreignObject.add(SVG('<input type="text">'))

Referencing / Creating Elements 引用创建元素

使用CSS选择器进行引用

SVG（）

returns SVG.Dom （或的最相关子类SVG.Element）

此函数将获取与传递的选择器匹配的第一个元素

var rect = SVG('rect.my-class').fill('#f06')

element.findOne()

returns SVG.Dom （或的最相关子类SVG.Element）

此函数将获取element匹配传递的选择器的第一个元素

var rect = group.findOne('rect.my-class').fill('#f06')

SVG.find（）

returns SVG.List

这将搜索与选择器匹配的所有svg元素，并在的实例中返回它们SVG.List：

var list = SVG.find('.someClass')

list.fill('#f06')

它还允许第二个参数是应该在其中搜索的节点：

var list = SVG.find('.someClass', group)

list.fill('#f06')

element.find（）

returns SVG.List

这将搜索与以下选择器匹配的所有svg元素element，并在的实例中返回它们SVG.List：

var list = group.find('.someClass')

list.fill('#f06')

引用现有的DOM元素

SVG（）

returns SVG.Element

如果希望SVG.js采用现有的DOM元素，则可以使用SVG()：

var polygon = document.createElement('polygon')

var element = SVG(polygon)

element.fill('#f06')

使用jQuery或Zepto

另一种方法是使用jQuery或Zepto。这是一个例子：

// add elements
var draw   = SVG().addTo('#drawing')
var group  = draw.group().addClass('my-group')
var rect   = group.rect(100,100).addClass('my-element')
var circle = group.circle(100).addClass('my-element').move(100, 100)

// get elements in group
var elements = $('#drawing g.my-group .my-element').each(function() {
  this.instance.animate().fill('#f09')
})

循环参考

SVG.js中的每个元素实例都有一个对real的引用node。

节点

returns SVGElement

element.node

实例

returns SVG.Element

类似地，node带有对SVG.js的引用instance：

node.instance

注意返回值的差异。 该node引用原生SVGElement而instance引用的SVG.Element实例。

儿童参考

children（）

returns array

可以使用以下children方法检索所有子项的SVG.List ：

draw.children()

clear（）

returns itself

要从父元素中删除所有元素：

draw.clear()

each（）

returns itself

将each()让您遍历元素的所有孩子：

draw.each(function(i, children) {
  this.fill({ color: '#f06' })
})

通过将true作为第二个参数传递，也可以进行深度遍历：

// draw.each(block, deep)
draw.each(function(i, children) {
  this.fill({ color: '#f06' })
}, true)

注意：this是指当前的子元素。

first（）

returns SVG.Element

要获取父元素的第一个孩子：

draw.first()

get（）

returns SVG.Element

获取子数组中给定位置的元素：

var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

draw.get(0) //-> returns rect
draw.get(1) //-> returns circle

has（）

returns boolean

检查父元素中元素的存在：

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.has(rect)  //-> returns true
group.has(rect) //-> returns false

index（）

returns number

返回给定元素的索引，如果不是孩子则返回-1：

var rect  = draw.rect(100, 50)
var group = draw.group()

draw.index(rect)  //-> returns 0
group.index(rect) //-> returns -1

last（）

returns SVG.Element

要获取父元素的最后一个孩子：

draw.last()

家长参考

每个元素都使用方法引用其父元素parent()：

root（）

returns SVG.Svg

要获取根SVG，可以使用 root()

var draw = SVG().addTo('#drawing')
var rect = draw.rect(100, 100)

rect.root() //-> returns draw

svg文档中的 parent（）

returns SVG.Element

element.parent()

或者，可以将类或css选择器作为第一个参数传递：

var draw   = SVG().addTo('#drawing')
var nested = draw.nested().addClass('test')
var group  = nested.group()
var rect   = group.rect(100, 100)

rect.parent()           //-> returns group
rect.parent(SVG.Svg)    //-> returns nested
nested.parent(SVG.Svg)  //-> returns draw
rect.parent(SVG.G)      //-> returns group
rect.parent('.test')    //-> returns nested

最顶层svg文件上的 parent（）

returns HTMLNode

var draw = SVG().addTo('#drawing')

draw.parent() //-> returns an SVG.Dom wrappig the html element with id 'drawing'

parents（）

returns SVG.List

要使元素的所有祖先达到并包括所传递的匹配器或元素，请使用parents()。如果没有传递匹配器，则使用根svg元素。

var group1 = draw.group().addClass('test')
  , group2 = group1.group()
  , rect   = group2.rect(100,100)

rect.parents()        // returns [group2, group1, draw]
rect.parents('.test') // returns [group2, group1]
rect.parents(group2)   // returns [group2]
rect.parents(group1)   // returns [group2, group1]

URI参考

如果一个元素通过属性链接到另一个元素，则可以使用该reference()方法来获取链接的元素实例。

reference（）

returns SVG.Element

唯一需要的是属性名称：

use.reference('href') //-> returns used element instance
// or
rect.reference('fill') //-> returns gradient or pattern instance for example
// or
circle.reference('clip-path') //-> returns clip instance

创建元素

SVG（）

要创建一个新的SVG.Svg文档，只需调用 SVG()

var draw = SVG()

要从标记创建元素，您还可以使用 SVG()

var rect = SVG('<rect width="100" height="100">')

对象构造函数

要创建未附加到dom的裸svg对象，请直接使用elements构造函数

var rect = new SVG.Rect()

Manipulating

属性

attr() as setter

returns` **`itself`**
`animate` **`yes`** `(only for numbers, arrays, colors, ...)

设置单个属性：

rect.attr('x', 50)

一次设置多个属性：

rect.attr({
  fill: '#f06'
, 'fill-opacity': 0.5
, stroke: '#000'
, 'stroke-width': 10
})

使用名称空间设置属性：

rect.attr('x', 50, 'http://www.w3.org/2000/svg')

明确删除属性：

rect.attr('fill', null)

attr() as getter

returns` **`value`** `(string, number, ...)

您可以直接使用获取和设置元素的属性attr()。

获取单个属性：

var x = rect.attr('x')

获取所有属性作为对象：

var attributes = rect.attr()

仅获取指定的属性：

var attributes = rect.attr(['x', 'y'])

定位

通过直接设置元素的属性来定位元素仅在该类型的元素本机使用属性的情况下有效，但下面描述的定位方法对所有元素类型都更为方便。

例如，以下代码有效，因为每个元素都是通过设置本机属性来定位的：

rect.attr({ x: 20, y: 60 })
circle.attr({ cx: 50, cy: 40 })

该rect会由它的左上角被移动到新的坐标，circle将通过其中心移动。但是，尝试以此方式“移动” circle其“角”或其rect中心将失败。下列行将被静默忽略，因为所设置的元素本身并未使用所寻址的属性：

rect.attr({ cx: 20, cy: 60 })
circle.attr({ x: 50, y: 40 })

但是，下面讨论的定位方法将适用于所有元素类型，而不管所寻址的属性是否是该类型的本机。因此，与上面的代码行不同，这些代码行可以正常工作：

rect.cx(20).cy(60)
circle.x(50).y(40)

不过，请务必注意，这些方法仅适用于用户（无单位）坐标。例如，如果某个元素的大小通过百分比或其他单位进行设置，则解决其本机属性的定位方法很可能仍然可以使用，但是解决非本机属性的定位方法将产生意外的结果-既是getter也就是setter ！

move()

returns itself animate yes

其左上角移动元素到给定x和y位置：

rect.move(200, 350)

x() as setter

returns itself animate yes

仅沿x轴移动元素的左上角：

rect.x(200)

x() as getter

returns value

没有参数的情况下，该x()方法用作吸气剂：

var x = rect.x()

y() as setter

returns itself animate yes

仅沿y轴移动元素的左上角：

rect.y(350)

y() as getter

returns value

没有参数的情况下，该y()方法用作吸气剂：

var y = rect.y()

center()

returns itself animate yes

通过它的中心，以一个给定的移动元件cx和cy位置：

rect.center(150, 150)

cx() as setter

returns itself animate yes

x仅沿其中心移动元素：

rect.cx(200)

cx() as getter

returns value

没有参数的情况下，该cx()方法用作吸气剂：

var cx = rect.cx()

cy() as setter

returns itself animate yes

y仅沿其中心移动元素：

rect.cy(350)

cy() as getter

returns value

如果没有参数，该cy()方法也可以用作吸气剂：

var cy = rect.cy()

domove()

returns itself animate yes

相对于其当前位置在x和y方向上移动元素：

rect.dmove(10, 30)

注意：使用时dmove()（dx()或dy()对此也是如此），请始终确保提供与元素最初所在的单位相同的值。因此，如果元素位于x:10%，请使用element.dx('5%')而不是element.dx('5px')。

dx()

returns itself animate yes

在x相对于其当前位置的方向上移动元素：

rect.dx(200)

dy()

returns itself animate yes

在y相对于其当前位置的方向上移动元素：

rect.dy(200)

调整大小

size()

returns itself animate yes

将元素的大小设置为给定的width和height：

rect.size(200, 300)

通过省略height以下内容，还可以按比例调整大小：

rect.size(200)

或通过null作为的值传递width：

rect.size(null, 200)

与定位一样，可以使用设置元素的大小attr()。但是由于每种类型的元素都以不同的size()方式处理其大小，因此该方法更加方便。

width() as setter

returns itself animate yes

Set the width of an element:

rect.width(200)

width() as getter

returns value

var width = rect.width()

height() as setter

returns itself animate yes

Set the height of an element:

rect.height(325)

height() as getter

returns value

rect.height()

radius()

returns itself animate yes

圆，椭圆和矩形可以使用该radius()方法。在矩形上，它定义了圆角。

对于圆，参数设置r属性。

circle.radius(10)

对于省略号和矩形，请传递两个参数来分别设置rx和ry属性。或者，传递单个参数以使两个属性相等。

ellipse.radius(10, 20)
rect.radius(5)

语法糖

fill()

returns itself

该fill()方法可以替代该attr()方法：

rect.fill({ color: '#f06', opacity: 0.6 })

一个十六进制字符串也可以工作：

rect.fill('#f06')

最后但并非最不重要的一点是，您还可以通过传递图像URL来将图像用作填充：

rect.fill('images/shade.jpg')

或者，如果您想进一步控制图像，则也可以传递图像实例：

rect.fill(draw.image('images/shade.jpg', function() {
  this.size(20, 20)
}))

storke()

returns itself

该stroke()方法类似于fill()：

rect.stroke({ color: '#f06', opacity: 0.6, width: 5 })

像填充一样，单个十六进制字符串也可以工作：

rect.stroke('#f06')

与fill()方法不同，您还可以通过传递图像URL来将图像用作笔触：

rect.stroke('images/shade.jpg')

或者，如果您想进一步控制图片的大小，则也可以传递图片实例：

rect.stroke(draw.image('images/shade.jpg', 20, 20))

opacity()

returns itself

设置元素的整体不透明度：

rect.opacity(0.5)

转型

transform()

returns itself animate yes

绝对使用仿射方法应用转换：

element.transform({
  rotate: 125,
  translateX: 50,
  translateY: 100,
  scale: 3 
})

为了使语法尽可能简单，可以通过不同的方式传递参数：

翻译：translate: {x: 50, y: 50}，translate: [50, 50]，translateX: 50, translateY: 50，tx: 50, ty: 50
旋转： rotate: 50
规模：scale: 2，scale: [2,2]，scaleX: 2, scaleY: 2
剪切/歪斜：skew: [10, 10]，skewX: 10, skewY: 10，shear: 3
翻转：both，true，x，y
- 产地： origin: {x: 50, y: 50}，origin: [50, 50]，origin: 50，originX: 50, originY: 50，ox: 50, oy: 50
  - origin也可以是最多2个单词，用于指定元素的角：中心，顶部，底部，左侧，右侧
- 位置：position: {x: 50, y: 50}，position: [50, 50]，positionX: 50, positionY: 50，px: 50, py: 50
  - 应用所有转换后原点的绝对位置
- 相对：relative: {x: 50, y: 50}，relative: [50, 50]，relativeX: 50, relativeY: 50，rx: 50, ry: 50
  - 应用所有转换后原点的相对位置

element.transform({
  translate: [10, 20],
  origin: 'top left',
  flip: 'both'
})

您还可以传入带有af参数的矩阵或对象以直接应用它：

element.transform({
  a: 1, b: 0, c: 1, d: 0, e: 10, f: 20
})

要应用相对转换，可以在对象中或第二个参数中传递一个标志：

或者，可以将相对标志作为第二个参数传递：

element.transform({ rotate: 125 }).transform({ rotate: 37.5, relative: true })
// or
element.transform({ rotate: 125 }).transform({ rotate: 37.5 }, true)

也可以相对于另一个元素甚至矩阵应用变换。您可以通过传入元素或矩阵而不是相对标志来实现：

element.transform({ rotation: 125 }, someElement)
element.transform({ rotation: 125 }, someMatrix)

transform() as getter

returns value

该transform()方法充当不带参数的完整获取器：

element.transform()

返回**object**的值包含以下值：

translateX （沿x轴平移）
translateY （沿y轴平移）
skewX （在x轴上计算的偏斜）
skewY （在y轴上计算的偏斜）
shear （在x轴上计算的sher）
scaleX （x轴上的计算比例）
scaleY （在y轴上计算出的比例）
rotate （计算的旋转）
originX （此用例为0）
originY（此用例为0） - a-f（矩阵数据）

另外，可以传递所需属性的字符串值：

element.transform('rotate')

flip()

returns itself animate yes

在给定轴上翻转元素：

element.flip('x')

要么

element.flip('y')

默认情况下，元素在其中心点上翻转。翻转原点可以使用第二个参数定义：

element.flip('x', {x: 20, y: 30})

最后，不提供轴值也可以一次将元素翻转到两个轴上，'both'或者true：

element.flip()
element.flip('both')
element.flip(true)

rotate()

returns itself animate yes

该rotate()方法将根据元素的中心自动旋转元素：

// rotate(degrees)
element.rotate(45)

尽管您也可以定义特定的旋转点：

// rotate(degrees, cx, cy)
element.rotate(45, 50, 50)

skew()

returns itself animate yes

该skew()方法将采用x和y值：

// skew(x, y)
element.skew(0, 45)

scale()

returns itself animate yes

该scale()方法将元素x和y 坐标乘以单个比例因子或两个单独的比例因子来缩放元素：

// scale(factor)
element.scale(2)
// scale(xFactor, yFactor)
element.scale(0.5, -1)

默认情况下，缩放比例是相对于元素中心的。您还可以定义一个特定的中心点（缩放的消失点）：

// scale(factor, centerX, centerY)
element.scale(2, 0, 0)
// scale(xFactor, yFactor, centerX, centerY)
element.scale(0.5, -1, 0, 0)

translate()

returns itself animate yes

该translate()方法将采用x和y值：

// translate(x, y)
element.translate(0.5, -1)

款式

css() as setter

returns itself

使用该css()方法，style可以像使用属性一样管理属性attr：

element.css('cursor', 'pointer')

可以使用一个对象同时设置多种样式：

element.css({ cursor: 'pointer', fill: '#f03' })

显式删除单个样式定义的工作方式与attr()方法相同：

element.css('cursor', null)

css() as getter

returns value （字符串，数字等）

类似attr()的css()方法也可以充当吸气剂：

element.css('cursor')
// => pointer

甚至是完整的吸气剂：

element.css()
// => {cursor:pointer;fill:#f03;}

您还可以通过使用数组来获取特定的样式：

element.css(['cursor', 'fill'])
// => {cursor:pointer;fill:#f03;}

hide()

returns itself

隐藏元素：

element.hide()

show()

returns itself

显示（取消隐藏）元素：

element.show()

visible()

returns boolean

要检查元素是否可见：

element.visible()

Class Names

addClass（）

returns itself

添加给定的CSS类：

element.addClass('pink-flower')

classes（）

returns array

以数组形式获取节点的CSS类：

element.classes()

hasClass（）

returns boolean

测试给定css类的存在：

element.hasClass('purple-rain')

removeClass（）

returns itself

删除给定的CSS类：

element.removeClass('pink-flower')

toggleClass（）

returns itself

切换给定的CSS类：

element.toggleClass('pink-flower')

数据

该data()方法允许您将任意对象，字符串和数字绑定到SVG元素。

data（）作为获取器

returns value

取值类似于attr()方法：

var key = rect.data('key')

data（）作为设置器

returns itself

rect.data('key', { value: { data: 0.3 }})

或一次设置多个值：

rect.data({
  forbidden: 'fruit'
, multiple: {
    values: 'in'
  , an: 'object'
  }
})

完全删除数据：

rect.data('key', null)

您的值将始终存储为JSON，在某些情况下，这可能不是所希望的。如果您想按原样存储值，只需将true作为第三个参数传递：

rect.data('key', 'value', true)

记忆

Remember（）作为吸气剂

returns value

检索内存

rect.remember('oldBBox')

Remember（）作为设置器

returns itself

将数据存储在内存中非常类似于设置属性：

rect.remember('oldBBox', rect.bbox())

也可以一次记住多个值：

rect.remember({
  oldFill:    rect.attr('fill')
, oldStroke:  rect.attr('stroke')
})

forget（）

returns itself

擦除单个内存：

rect.forget('oldBBox')

或一次擦除多个记忆：

rect.forget('oldFill', 'oldStroke')

最后，只需擦除整个内存即可：

rect.forget()

文件树

add（）

returns itself

将调用元素设置为参数的父节点。返回父级：

var rect = draw.rect(100, 100)
var group = draw.group()

group.add(rect) //-> returns group

addTo（）

returns itself

将调用元素设置为参数的子节点。返回孩子：

rect.addTo(group) //-> returns rect

clone（）

returns SVG.Element

要精确复制元素，可以使用该clone()方法：

var clone = rect.clone()

这将创建一个新的，未链接的副本。有关创建链接克隆的信息，请参见use元素。要插入克隆，请使用addTo()或add()。

put（）

returns SVG.Element

将调用元素设置为参数的父节点。返回孩子：

group.put(rect) //-> returns rect

putIn（）

returns SVG.Element

将调用元素设置为参数的子节点。返回父级：

rect.putIn(group) //-> returns group

remove（）

returns itself

从svg文档中删除调用元素：

rect.remove()

replace（）

returns SVG.Element

在svg文档中调用元素的位置，将调用元素替换为传递给方法的元素。

rect.replace(draw.circle(100))

toRoot（）

returns itself

与相同，toParent()但根节点为父节点

toParent（）

returns itself

将元素移动到其他父元素（类似于addTo），但不更改其视觉表示。所有转换都将合并并应用于元素。

rect.toParent(group) // looks the same as before

ungroup（）

returns itself

分解一个分组，并将其所有元素放入该组的父级，而不更改其视觉表示。这意味着，应用于该组的任何变换现在都将应用于其各个元素。

group.rect(100, 200)
group.circle(4)
group.transform({rotate: 20}).ungroup()
// group is deleted, rect and circle both have rotate: 20

您还可以指定将组元素移动到哪个容器：

group.ungroup(otherContainer)

flatten（）

returns itself

递归分解所有容器并展平整个结构，以使任何容器元素都无法生存。这对于导出以减少嵌套组或类似组的数量很有用。

递归取消组合该组中的所有元素，并将其放入给定的容器中

group.flatten(container)
// (default: parent container of the calling element)

在整个文档上调用它以获得平坦的svg结构：

drawing.flatten()

分解组并将所有元素放置在图形中：

group.flatten(drawing)

平面和出口SVG：

var svgString = drawing.flatten().svg()

安排

您可以使用以下方法在其父SVG文档中安排元素。

after（）

returns itself

插入一个元素：

// inserts circle after rect
rect.after(circle)

before（）

returns itself

在另一个元素之前插入一个元素：

// inserts circle before rect
rect.before(circle)

insertAfter（）

returns itself

将当前元素插入传递的元素后面

rect.insertAfter(circle)

insertBefore（）

returns itself

在传递的元素之前插入当前元素

rect.insertBefore(circle)

back（）

returns itself

将元素移到后面：

rect.back()

backward（）

returns itself

向后移动元素：

rect.backward()

front（）

returns itself

将元素移到最前面：

rect.front()

forward（）

returns itself

向前移动元素：

rect.forward()

next（）

returns SVG.Element

获取下一个同级：

rect.next()

position（）

returns number

获取其同胞之间rect的位置（数量）：

rect.position()

previous（）

returns SVG.Element

获取上一个同级：

rect.previous()

siblings（）

returns array

获取rect的所有兄弟姐妹，包括rect本身：

rect.siblings()

几何

point（）

returns SVG.Point

将点从屏幕坐标转换为元素坐标系。

// e is some mouseevent
var point = path.point(e.pageX, e.pageY) // {x, y}

inside（）

returns boolean

要检查给定点是否在元素的边界框内，可以使用以下inside()方法：

var rect = draw.rect(100, 100).move(50, 50)

rect.inside(25, 30) //-> returns false
rect.inside(60, 70) //-> returns true

注意：x和y位置是针对元素的相对位置进行测试的。不考虑父元素上的任何偏移量。

bbox（）

returns SVG.Box

给出元素的边界框，该边界框是元素周围未变形的最紧密的框。

element.bbox()

rbox（）

returns SVG.Box

返回元素的变形框，该框是元素周围变形最紧密的框。要指定将框转换到哪个坐标系，可以相对地传递一个元素：

element.rbox(drawing)
// transformed box in coordinates of drawing

这种方法是一个方便的包装方法getBoundingClientRect()。

viewbox（）

viewbox（）作为设置器

设置元素的视图框（仅在支持视图框的元素上可用）

drawing.viewbox(10, 10, 500, 600)
// or
drawing.viewbox('10 10 500 600')
// or
drawing.viewbox(box)

viewbox（）作为getter

returns SVG.Box

drawing.viewbox()

Animating 动画

动画元素与使用该attr()方法操纵元素几乎相同。唯一的区别是您必须包括该animate()方法。

animate()

returns SVG.Runner

rect.animate().move(150, 150)

该animate()方法将接受三个参数。第一个是duration，第二个delay和第三个when：

rect.animate(2000, 1000, 'now').attr({ fill: '#f03' })

或者，您可以将一个对象作为第一个参数传递，该对象接受更多参数：

rect.animate({
  duration: 2000,
  delay: 1000,
  when: 'now',
  swing: true,
  times: 5,
  wait: 200
}).attr({ fill: '#f03' })

默认情况下duration将设置为400，delay将设置为0并when设置为after。

该when参数指定动画的起点。它可以具有以下值：

- now：执行此调用后立即播放动画 - absolute或start：安排动画在时间轴上运行到绝对时间 -- relative安排动画相对于其旧的开始时间播放（对animate（）调用无用） - last或after：在时间轴上最后一个动画之后播放动画。如果没有，则立即播放动画（请参阅参考资料now）。

您可以通过animate再次调用将多个动画链接在一起：

rect.animate().attr({ fill: '#f03' }).animate().dmove(50,50)

您还可以在动画之间添加延迟：

rect.animate().attr({ fill: '#f03' }).delay(200).animate().dmove(50,50)

当然，这也可以通过在第二个调用中添加延迟来完成：

rect.animate().attr({ fill: '#f03' }).animate({delay: 200}).dmove(50,50)

SVG.Runner

该animate()方法将不返回目标元素，而是SVG.Runner的实例，该实例具有与任何元素相同的方法以及用于控制运行器的其他方法：

let rect = draw.rect(100, 100)
let runner = rect.animate()

runner.element() // returns or sets the element the runner is bound to
runner.timeline() // returns or sets the timeline the runner will be / is scheduled on
runner.animate() // for animation chaining. See element.animate()
runner.schedule(timeline, delay, when) // schedules the runner on the timeline. Timeline can be skipped if already set
runner.unschedule() // removes the runner from the timeline
runner.loop(times, swing, wait) // loops the animation by `times` times with `wait` milliseconds time between each loop
runner.queue(runOnceFn, runOnEveryStepFn) // Lets you chain functions which are not neccecarily animations
runner.during(fn) // Lets you bind a function to every animation step
runner.after(fn) // Lets you bind a function which is executed after the animation is finished
runner.time() // returns or sets the runner time
runner.duration() // returns the duration the runner will run
runner.loops() // Lets you jump to a specific iteration of the runner e.g. 3.5 for 4th loop half way through
runner.persist() // Make this runner persist on the timeline forever (true) or for a specific time. Usually a runner is deleted after execution to clean up memory.
runner.position() // returns or sets the current position of the runner ignoring the wait times (between 0 and 1)
runner.progress() // returns or sets the current position of the runner including the wait times (between 0 and 1)
runner.step(dt) // step the runner by a certain time (for manually stepping trough animations)
runner.reset() // set the runner back to zero time and all animations with it
runner.finish() // steps the runner to its finished state
runner.reverse() // execute the runner backwards
runner.ease() // change the easing of the animation
runner.active() // returns or sets the active state of the runner. Inactive runners are not executed

跑步者通常是通过调用动画来创建的。但是，可以创建不包含元素的运行器，并在以后设置该元素：

var runner = new SVG.Runner({duration: 1000})
runner.move(100, 100)

runner.element(someElement)

// Step animation by 20ms
runner.step(20)

// To animate, we need a timeline on which the runner is run
var timeline = new SVG.Timeline()
timeline.schedule(runner)

Easing

动画的缓动可以通过运行器的ease()方法进行更改。

所有可用的缓解类型为：

<>：轻松进出
>：放松
<：缓解
-：线性
一个功能
beziere(x1, y1, x2, y2)
step(steps, stepPosition)

该beziere()和step()方法为您创建一个宽松的功能，然后可以传递给ease()

var runner = new SVG.Runner({duration: 1000})

// use a string
runner.ease('<>')

// or pass a function
runner.ease(SVG.easing.beziere(x1, y1, x2, y2))
runner.ease(SVG.easing.step(5, 'jump-end'))

有关更多的缓动方程，请查看svg.easing.js插件。

SVG.Timeline

SVG.Timeline驱动跑步者为元素设置动画。可以将Runner安排在同一时间轴上，以安排更大的动画。

finish()

returns itself

此方法完成了整个时间表。所有值均设置为其相应的最终值，并且每个动画都被填充满

rect.animate().move(200, 200).animate().dmove(50,50).size(300,400)

rect.timeline().finish() // rect at 250,250 with size 300,400

pause()

returns itself

暂停时间轴：

rect.animate().move(200, 200)

rect.mouseover(function() { this.timeline().pause() })

play()

returns itself

取消暂停时间轴：

rect.animate().move(200, 200)

rect.mouseover(function() { this.timeline().pause() })
rect.mouseout(function() { this.timeline().play() })

reverse()

returns itself

反向播放时间轴，基本上可以追溯到时间：

// will run from 100,100 to rects initial position
rect.animate(3000).move(100, 100)
rect.timeline().reverse()

// sets direction to backwards
rect.timeline().reverse(true)

// sets direction to forwards
rect.timeline().reverse(false)

stop()

returns itself

停止时间轴并将时间设置回零

rect.animate().move(200, 200)

rect.timeline().stop()

speed()

returns itself

更改时间轴的速度。负速度会逆转时间轴。

rect.animate().move(200, 200)

rect.timeline().speed(2)

time()

returns itself

设置时间轴的当前时间

rect.animate().move(200, 200)

rect.timeline().time(100)

seek()

returns itself

三角洲寻找时间

rect.animate().move(200, 200)

rect.timeline().seek(100)

persist()

returns itself

设置跑步者在执行后的默认处理方式。通常跑步者会被删除以清除内存

rect.animate().move(200, 200)

rect.timeline().persist(100) // persist runner for 100ms more than their end time
rect.timeline().persist(true) // never delete runners

source()

returns itself

更改时间轴的时间源

rect.animate().move(200, 200)

rect.timeline().source(fn)

schedule()

returns itself

在时间轴上安排跑步者

var timeline = new SVG.Timeline()
var runner = new SVG.Runner()
runner.move(100, 100)
timeline.schedule(runner, 100, 'now') // runner, delay, when - see animate()

unschedule()

returns itself

取消安排/从时间轴中删除跑步者

var timeline = new SVG.Timeline()
var runner = new SVG.Runner()
runner.move(100, 100)
timeline.schedule(runner, 100, 'now')
timeline.unschedule(runner) // same as runner.unschedule()

Controllers

除了使用缓动功能外，还可以使用控制器来控制动画。SVG.js带有两个内置控制器。SVG.Spring和SVG.PID。

element.animate(new SVG.Spring(settleTime)).move(200, 200)
element.animate(new SVG.PID(p, i, d)).move(200, 200)

您可能会注意到，指定了控制器而不是指定持续时间，因为只有控制器本身才知道动画何时完成。这就是为什么无法使用控制器编排或反转动画的原因。

Orchestrate Animations

要创建包含多个都绑定到同一时间轴的元素的更大的动画，可以将SVG.Timeline和SVG.Runner一起使用：

var timeline = new SVG.Timeline()

var rect1 = draw.rect(100, 200)
var rect2 = draw.rect(200, 100)

rect1.timeline(timeline)
rect2.timeline(timeline)

rect1.animate(300, 0, 'absolute').move(300, 300) // start at time 0 of timeline
rect2.animate(400, 200, 'absolute').move(500, 500) // start at time 200 of timeline

Events 事件

Basic events

element.click()

returns itself

事件可以绑定到元素，如下所示：

element.click(function() {
  this.fill({ color: '#f06' })
})

删除它非常简单：

element.click(null)

所有可用的其他事件有：click，dblclick，mousedown，mouseup，mouseover，mouseout，mousemove，touchstart，touchmove，touchleave，touchend和touchcancel...

Event listeners

element.fire()

returns itself

触发事件：

element.fire(event)

可以选择将具有任意数据的对象作为第二个参数传递：

element.fire(event, { arbitrary: data })

element.dispatch()

returns event

同样会在元素上触发一个事件，fire()但会返回该事件。然后，您可以检查defaultPrevented事件：

var event = element.dispatch(event)
if (event.defaultPrevented)
  doNothing()

element.on()

returns itself

var click = function() {
  this.fill({ color: '#f06' })
}

element.on('click', click)

可以使用任一数组来传递多种事件类型：

element.on(['click', 'mouseover'], handler)

或以空格分隔的字符串：

element.on('click mouseover', handler)

注意：this回调中的上下文绑定到元素。或者，可以传递第三个参数来定义自定义上下文：

element.on('click', click, window)

element.off()

returns itself

解除绑定事件同样容易：

element.off('click', click)

或取消绑定给定事件类型的所有侦听器：

element.off('click')

或多种事件类型：

element.off(['click', 'mouseover'])
element.off('click mouseover')

甚至取消绑定所有事件的所有侦听器：

element.off()

Other elements

SVG.on()

SVG.on(window, 'click', click)

SVG.off()

SVG.off(window, 'click', click)

Custom events

您甚至可以使用自己的事件。

只需为您的事件添加一个事件监听器：

element.on('myevent', function() {
  alert('ta-da!')
})

现在，您随时可以在需要时触发该事件：

function whenSomethingHappens() {
  element.fire('myevent')
}

// or if you want to pass an event
function whenSomethingHappens(event) {
  element.fire(event)
}

您还可以将一些数据传递给事件：

function whenSomethingHappens() {
  element.fire('myevent', {some:'data'})
}

element.on('myevent', function(e) {
  alert(e.detail.some) // outputs 'data'
})

SVG.js支持遵循语法的命名空间事件event.namespace。

命名空间事件的行为类似于普通事件，不同之处在于您可以删除它而无需接触其他命名空间的处理程序。

// attach
element.on('myevent.namespace', function(e) {
  // do something
})

// detach all handlers of namespace for myevent
element.off('myevent.namespace')

// detach all handlers of namespace
element.off('.namespace')

// detach all handlers including all namespaces
element.off('myevent')

但是，您无法触发特定的命名空间事件。通话element.fire('myevent.namespace')不会在element.fire('myevent')工作时执行任何操作，并会触发事件的所有附加处理程序

重要说明：始终确保为事件命名空间，以避免冲突。最好使用非常具体的东西。因此event.wicked例如比通用之类的更好event.svg。

Classes

SVG.js添加了许多与SVG规范无关的功能。大多数附加功能都是OO性质的一部分，但是还有其他有用的实用程序。

SVG.Box

所述SVG.Box保持对象的矩形尺寸。可用属性为：

x
y
width
height
x2
y2
cx
cy

merge()

returns itself

使用merge()，SVG.Box可以将两个实例合并到一个新实例中，基本上是两个原始框的边界框。例如：

var box1 = draw.rect(100,100).move(50,50).bbox()
var box2 = draw.rect(100,100).move(200,200).bbox()
var box3 = box1.merge(box2)

transform()

returns SVG.Box

使用给定的矩阵或变换来变换框：

var transformedBox = box.transform(matrix)

SVG.List

inherits from native array

如果要一次修改或设置多个元素的动画，列表非常有用。列表可以访问所有内置数组方法，并且还可以接受在单个元素上可以访问的所有相同方法。您的插件介绍的方法甚至都可用！每个方法都返回一个包含该方法调用结果的新列表。因此，如果被调用方法支持，则方法链接是可能的。另一方面，您也可以检索例如填充的列表。创建列表的工作方式与您期望的完全相同：

// create some elements
var rect = draw.rect(100,100)
var circle = draw.circle(100).move(100,100).fill('#f09')

// create a set and add the elements
var list = new SVG.List([rect])
list.push(circle)

// list[0] == rect
// list[1] == circle

// change the fill of all elements in the set at once
list.fill('#ff0')

var allfilles = list.fill() // get all the colors

单个元素可以是多个集合的成员。集也没有结构表示，实际上它们只是奇特的数组。

animate()

returns SVG.List

设置动画的工作方式：

list.animate(3000).fill('#ff0')

each()

returns itself

使用spefified方法或传递的函数遍历列表中的所有成员：

list.each('fill', 'blue') // same as list.fill('blue')
list.each(function(item) {
  return item.fill('blue')
})

SVG.Array

SVG.Array从受支持平台的内置数组继承而来，从不支持平台的伪数组继承。它可以容纳任何内容，但对于用空格或逗号分隔的数字字符串创建数组特别有用：

'0.343 0.669 0.119 0 0 0.249 -0.626 0.13 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0'

也可以像这样以更易管理的格式传递：

new SVG.Array([ .343,  .669, .119, 0,   0
              , .249, -.626, .130, 0,   0
              , .172,  .334, .111, 0,   0
              , .000,  .000, .000, 1,  -0 ])

clone()

returns new instance

复制数组并返回：

var array = new SVG.Array()
var clone = array.clone()

**注意：**此方法执行多维阵列状深克隆SVG.PointArray和SVG.PathArray。注2：显然，返回的数组是相同的类作为克隆阵列（例如SVG.Array，SVG.PointArray或SVG.PathArray）。

to()

returns itself

为了对数组值进行动画处理，该to()方法允许您传递目标值。这可以是字符串值，纯数组或相同类型的SVG.js数组的实例：

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.to('100,0 0,100 200,200')

确保起点和终点的长度相同

move()

returns itself

使用给定x和y值移动数组的几何：

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.move(33,75)
array.toString() //-> returns '33,75 133,175'

注意：此方法仅适用于SVG.PointArray和SVG.PathArray

reverse()

returns itself

颠倒数组的顺序：

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.reverse()
array.toString() //-> returns '100,100 0,0'

settle()

returns itself

变形完成后，该settle()方法将消除所有过渡点，例如重复项：

array.settle()

size()

returns itself

通过给定width和height值调整数组的几何尺寸：

var array = new SVG.PointArray([[0, 0], [100, 100]])
array.move(100,100).size(222,333)
array.toString() //-> returns '100,100 322,433'

注意：此方法仅适用于SVG.PointArray和SVG.PathArray

SVG.PointArray

inherits from SVG.Array

有点复杂，用于折线和多边形元素。这是一个多点字符串：

'0,0 100,100'
// or
'0 0 100 100'
// or
'0, 0, 100, 100'

平面数组表示形式：

[0, 0, 100, 100]

多维数组表示形式：

[
  [0, 0]
, [100, 100]
]

将其预编译为SVG.PointArray：

new SVG.PointArray([
  [0, 0]
, [100, 100]
])

请注意，每个实例SVG.Polyline和SVG.Polygon承载的参考SVG.PointArray实例：

polygon.array() //-> returns the SVG.PointArray instance

bbox()

returns object

获取数组几何的边界框：

array.bbox()

SVG.PathArray

inherits from SVG.Array

路径数组带有表示路径字符串中每个段的数组：

'M0 0L100 100z'

平面数组表示形式：

[ 'M', 0, 0, 'L', 100, 100, 'z' ]

多维数组表示形式：

[
  ['M', 0, 0]
, ['L', 100, 100]
, ['z']
]

将其预编译为SVG.PathArray：

new SVG.PathArray([
  ['M', 0, 0]
, ['L', 100, 100]
, ['z']
])

请注意，的每个实例都SVG.Path带有对该SVG.PathArray实例的引用：

path.array() //-> returns the SVG.PathArray instance

Syntax

patharrays的语法非常可预测。它们基本上是两个二维数组形式的文字表示。

搬去

原始语法为M0 0或m0 0。SVG.js语法['M',0,0]或['m',0,0]。

线到

原始语法为L100 100或l100 100。SVG.js语法['L',100,100]或['l',100,100]。

水平线

原始语法为H200或h200。SVG.js语法['H',200]或['h',200]。

垂线

原始语法为V300或v300。SVG.js语法['V',300]或['v',300]。

贝塞尔曲线

原始语法为C20 20 40 20 50 10或c20 20 40 20 50 10。SVG.js语法['C',20,20,40,20,50,10]或['c',20,20,40,20,50,10]。

或镜像为S：

原始语法为S40 20 50 10或s40 20 50 10。SVG.js语法['S',40,20,50,10]或['s',40,20,50,10]。

或平方与Q：

原始语法为Q20 20 50 10或q20 20 50 10。SVG.js语法['Q',20,20,50,10]或['q',20,20,50,10]。

或完整的快捷方式T：

原始语法为T50 10或t50 10。SVG.js语法['T',50,10]或['t',50,10]。

弧

原始语法为A 30 50 0 0 1 162 163或a 30 50 0 0 1 162 163。SVG.js语法['A',30,50,0,0,1,162,163]或['a',30,50,0,0,1,162,163]。

关

原始语法为Z或z。SVG.js语法['Z']或['z']。

可以在MDN上找到有关路径的最佳文档。

bbox()

returns object

获取数组几何的边界框：

array.bbox()

SVG.Color

SVG.js具有专用的颜色类，可以处理不同类型的颜色。可接受的值为：

六角弦 ; 三个基于（例如，＃f06）或六个基于（例如，＃ff0066）new SVG.Color('#f06')
rgb字符串 ; 例如rgb（255，0，102）new SVG.Color('rgb(255, 0, 102)')
rgb对象 ; 例如{r：255，g：0，b：102}new SVG.Color({ r: 255, g: 0, b: 102 })
xyz对象 ; 例如{x：255，y：0，z：102}new SVG.Color({ x: 255, y: 0, z: 102 })
hsl对象 ; 例如{h：255，s：0，l：102}new SVG.Color({ h: 255, s: 0, l: 102 })
实验对象 ; 例如{l：255，a：0，b：102}new SVG.Color({ l: 255, a: 0, b: 102 })
lch对象 ; 例如{l：255，c：0，h：102}new SVG.Color({ l: 255, c: 0, h: 102 })
cmyk对象 ; 例如{c：255，m：0，y：102，k：0}new SVG.Color({ c: 255, m: 0, y: 102, k:0 })
参数表：new SVG.Color(255, 0, 102, 'rgb')

请注意，使用对象时，每次都提供所有三个值很重要。

该SVG.Color实例具有自己的几种方法。

要将空间彼此转换，可以使用以下方法：

color.rgb()
color.xyz()
color.hsl()
color.lab()
color.lch()
color.cmyk()

to()

returns SVG.Morphable

在给定位置获取可变形的颜色：

var color = new SVG.Color('#ff0066').to('#000')
color.at(0.5).toHex() //-> '#7f0033'

toHex()

returns string

获取十六进制值：

color.toHex() //-> returns '#ff0066'

toRgb()

returns string

获取rgb字符串值：

color.toRgb() //-> returns 'rgb(255,0,102)'

SVG.Color.random（）

与SVG.Color.random()随机颜色可以被创建。可以使用不同的modi来生成颜色：

SVG.Color.random('vibrant') // this is the default
SVG.Color.random('sine')
SVG.Color.random('pastel')
SVG.Color.random('dark')
SVG.Color.random('rgb')
SVG.Color.random('lab')
SVG.Color.random('grey')

SVG.Matrix

SVG.js中的矩阵具有自己的类SVG.Matrix。它们添加了许多功能，例如提取转换值，矩阵变形和对本机方法的改进。

在SVG.js中，矩阵在初始化时会接受各种值。

没有值：

var matrix = new SVG.Matrix
matrix.toString() //-> returns matrix(1,0,0,1,0,0)

六个论点：

var matrix = new SVG.Matrix(1, 0, 0, 1, 100, 150)
matrix.toString() //-> returns matrix(1,0,0,1,100,150)

字符串值：

var matrix = new SVG.Matrix('1,0,0,1,100,150')
matrix.toString() //-> returns matrix(1,0,0,1,100,150)

对象值：

var matrix = new SVG.Matrix({ a: 1, b: 0, c: 0, d: 1, e: 100, f: 150 })
matrix.toString() //-> returns matrix(1,0,0,1,100,150)

您可以传递给（/ manipulating /＃transform）方法的所有内容也可以传递给矩阵构造函数：

var matrix = new SVG.Matrix({ translate: [20, 20] })

本地人SVGMatrix：

var svgMatrix = svgElement.getCTM()
var matrix = new SVG.Matrix(svgMatrix)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)

甚至一个实例SVG.Element：

var rect = draw.rect(50, 25)
var matrix = new SVG.Matrix(rect)
matrix.toString() //-> returns matrix(1,0,0,1,0,0)

transform()

用另一个矩阵或变换对矩阵进行变换：

var matrix = new SVG.Matrix()
matrix.transform({rotate: 20})

decompose()

将矩阵分解为其仿射参数

var matrix = new SVG.Matrix()
matrix.decompose(cx, cy)

有关返回的值，请参见（/ manipulating /＃transform）-getter

around()

returns SVG.Matrix

在给定的中心点周围执行给定的矩阵变换：

// cx, cy, matrix
matrix.around(100, 150, new SVG.Matrix().skew(0, 45))

作为第三个参数传递的矩阵将用于相乘。

at()

returns SVG.Morphable

此方法将创建一个变形器，该变形器可用于将矩阵变形到0和之间的给定位置1：

matrix.to(matrix).at(0.27)

clone()

returns SVG.Matrix

返回矩阵的精确副本：

matrix.clone()

filp()

returns SVG.Matrix

在给定轴上翻转矩阵：

matrix.flip('x')

要么

matrix.flip('y')

默认情况下，元素在其中心点上翻转。翻转轴位置可以使用第二个参数定义：

matrix.flip('x', 150)

要么

matrix.flip('y', 100)

inverse()

returns SVG.Matrix

创建一个倒置的矩阵：

matrix.inverse()

matrix()

returns SVG.Matrix

乘以另一个给定的矩阵：

matrix.matrix(matrix2)

rotate()

returns SVG.Matrix

按度旋转矩阵并给出一个值：

// degrees
matrix.rotate(45)

使用三个值围绕给定点旋转矩阵度：

// degrees, cx, cy
matrix.rotate(45, 100, 150)

scale()

returns SVG.Matrix

用一个值缩放矩阵均值：

// scale
matrix.scale(2)

用两个值缩放矩阵非均匀矩阵：

// scaleX, scaleY
matrix.scale(2, 3)

使用三个值在给定的中心点上均匀缩放矩阵：

// scale, cx, cy
matrix.scale(2, 100, 150)

使用四个值在给定的中心点上缩放矩阵非均匀矩阵：

// scaleX, scaleY, cx, cy
matrix.scale(2, 3, 100, 150)

skew()

returns SVG.Matrix

偏斜在x和y轴上使用两个值对给定度矩阵：

// degreesX, degreesY
matrix.skew(0, 45)

偏斜在给定点上的x和y轴上以四个值对给定度矩阵：

// degreesX, degreesY, cx, cy
matrix.skew(0, 45, 150, 100)

toString()

returns string

将矩阵转换为转换字符串：

matrix.toString()
// -> matrix(1,0,0,1,0,0)

translate()

returns SVG.Matrix

用给定的x和y值转换矩阵：

matrix.translate(10, 20)

SVG.Number

SVG.js中的数字具有专用的数字类，以便能够处理字符串值。创建一个新号码很简单：

var number = new SVG.Number('78%')
number.plus('3%').toString() //-> returns '81%'
number.valueOf() //-> returns 0.81

运算符定义为SVG.Number实例上的方法。

to()

returns SVG.Morphable

获取给定位置的可变形数：

var number = new SVG.Number('79%').to('3%')
number.at(0.55).toString() //-> '37.2%'

divide()

returns SVG.Number

师：

number.divide('3%')

minus()

returns SVG.Number

减法：

number.minus('3%')

plus()

returns SVG.Number

加成：

number.plus('3%')

times()

returns SVG.Number

乘法：

number.times(2)

to()

returns SVG.Number

将号码更改为另一个单位：

number.to('px')

SVG.Point

SVG.Point由point（）返回，但它也是创建向量的有用类。

构造器可以采用许多不同形式的坐标：

var vector1 = new SVG.Point(1)
var vector2 = new SVG.Point(1,1)
var vector3 = new SVG.Point([1,1])
var vector4 = new SVG.Point({x:1,y:1})
var vector5 = new SVG.Point(new SVG.Point(1,1))

clone()

returns SVG.Point

获取SVG.Point具有相同x / y值的新值。

var newPoint = new SVG.Point(1,1).clone()

to()

returns SVG.Morphable

获取可变形对象，该对象可用于获取给定位置的点：

var point = new SVG.Point(1,1).to(11,10)
point.at(0.5) //-> {x: 6, y: 5.5}

transform()

returns SVG.Point

用矩阵变换点：

var point = new SVG.Point(1,1)
point.transform(new SVG.Matrix().skew(0, 45)) //-> {x: 1, y: 2}

SVG.EventTarget

此类是所有SVG对象都继承的类。它添加了一个事件层，以便每个对象都可以具有事件功能。如何将这些方法的工作可以在可见事件 -section

on()

添加事件

off()

删除事件

fire()

触发事件

dispatch()

触发事件并返回事件

Import / export SVG

svg() as getter

returns string

可以使用以下svg()方法来导出完整生成的SVG或其中的一部分：

draw.svg()

导出也可以处理单个元素：

var rect = draw.rect()
var svg  = rect.svg()

您可以指定是否只希望导出元素的内容，而不是导出包含其内容的元素：

var children = draw.svg(false)

您还可以指定导出修饰符，该修饰符在导出之前在每个节点上运行：

var roundedChildren = draw.svg(function(node) {
  node.round(4)
}, false)

甚至可以在此修饰符中删除或替换节点：

var tidied = draw.svg(function(node) {
  // remove all shapes with blue color
  if (node.fill() == 'blue') return false

  // replace with circles
  return new Circle().radius(5).fill(node.fill())
})

svg() as setter

returns itself

通过传递svg字符串作为第一个参数，使用相同的方法进行导入：

draw.svg('<g><rect width="100" height="50" fill="#f06"></rect></g>')

您也可以一次导入多个子级：

draw.svg('<rect><rect><rect>')

如果要用导入的元素替换当前元素，则可以传递一个标志：

group.svg('<rect><rect><rect>', true)

注意，此调用始终返回svg()被调用元素的父级。即，因为通过用多个其他节点替换一个节点，不清楚返回哪个节点。这就是为什么父母归还。

扩展

由于SVG.js的面向对象特性，可以在任何级别上扩展对象/原型。此外，所有SVG.js类都可以被子类化以创建自定义元素。

SVG.extend（）

SVG.js具有模块化结构。在不同级别添加自己的方法非常容易。假设我们要向所有形状类型添加方法，然后将方法添加至SVG.Shape：

SVG.extend(SVG.Shape, {
  paintRed: function() {
    return this.fill('red')
  }
})

现在，所有形状都将具有paintRed()可用的方法。假设我们要让paintRed()椭圆上的方法应用略有不同的颜色：

SVG.extend(SVG.Ellipse, {
  paintRed: function() {
    return this.fill('orangered')
  }
})

完整的继承堆栈为SVG.Ellipse：

SVG.Base`**`>`** `SVG.EventTarget` **`>`** `SVG.Dom` **`>`** `SVG.Element` **`>`** `SVG.Shape` **`>`** `SVG.Ellipse

可以使用以下方法扩展SVG文档：

SVG.extend(SVG.Svg, {
  paintAllPink: function() {
    this.each(function() {
      this.fill('pink')
    })
  }
})

您还可以一次扩展多个元素：

SVG.extend([SVG.Ellipse, SVG.Path, SVG.Polygon], {
  paintRed: function() {
    return this.fill('orangered')
  }
})

Subclassing

借助子类化，使用SVG.js创建您自己的自定义元素非常容易。为了这个示例，让我们“发明”一个形状。我们希望rect圆角始终与元素的高度成比例。新形状位于SVG命名空间中，并称为Rounded。这是我们实现这一目标的方法。

SVG.Rounded = class extends SVG.Rect{
  // Create method to proportionally scale the rounded corners
  size: function(width, height) {
    return this.attr({
      width:  width
    , height: height
    , rx:     height / 5
    , ry:     height / 5
    })
  }
})

// Add a method to create a rounded rect
SVG.extend(SVG.Container,  {
  // Create a rounded element
  rounded: function(width, height) {
    return this.put(new SVG.Rounded).size(width, height)
  }
}

要在图形中创建元素：

var rounded = draw.rounded(200, 100)

就是这样，现在可以使用本发明了！

插件

这是SVG.js可用的所有插件的列表。如果您写了一个，请告诉我们！

svgjs

svg.js中文文档（粗略版）

源码准备

快速开始

创建一个SVG文档

等待DOM加载

纯SVG

SVG（）函数

API

容器元素

SVG

svg()

nested()

G

group()

add()

Symbol

Defs

defs()

root()

A

Link ()

to()

target()

linkTo()

SVG

svg.js元素的常规处理

Creating SVG Elements

使用属性创建SVG元素

Dom

element()

words()

rect()

radius()

circle()

radius()

ellipse()

radius()

line()

array()

plot()

polyline()

array()

clear()

plot()

polygon() 多边形

array()

clear()

plot()

path()

array()

clear()

length()

pointAt()

plot()

text()

text()

build()

clear()

length()

font() as setter

font() as getter

leading() as setter

leading() as getter

path()

textPath()

plain()

rebuild()

text() as setter()

text() as getter()

tspan()

textPath()

array()

plot()

textPath()

track()

SVG.Text的事件

tspan()

clear()

dx()