【SVG.js】元素【未完成】

容器元素（Container Elements）

SVG.Container
The SVG.Container class is the base wrapper for all elements that can contain other elements.
SVG.Container 类是可以包含其他元素的所有元素的基本包装器。

The inheritance stack is: SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element > SVG.Container.
继承堆栈是：SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element > SVG.Container。

SVG.Svg

SVG.G

Grouping elements can be useful if you want to transform a set of elements as if it were one. All element within a group, maintain their position relative to the group they belong to.
如果您想将一组元素转换为一个元素，则对元素进行分组会很有用。组内的所有元素，保持其相对于所属组的位置。

Note: Groups do not have a geometry of their own, it’s inherited from their content. Therefore groups do not listen to x, y, width and height attributes. If that is what you are looking for, use a nested() svg instead.
注意：组没有自己的几何图形，它是从其内容继承的。因此，组不监听 x、y、宽度和高度属性。如果那是您正在寻找的内容，请改用 nested() svg。

group()

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

A group has all the same element methods as the root SVG document:
组具有与根 SVG 文档相同的元素方法：

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

Existing elements from the SVG document can also be added to a group:
SVG 文档中的现有元素也可以添加到组中：

group.add(rect)

SVG.Symbol

SVG.Defs

SVG.A

Create a hyperlink that will be activated on all child elements.
创建将在所有子元素上激活的超链接。

link()

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

A hyperlink or <a> tag creates a container that enables a link on all children:
超链接或 <a> 标记创建一个容器，可以在所有子项上启用链接：

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

link.to()

The link url can be updated with the to() method:
可以使用 to() 方法更新链接 url：

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

link.target()

Furthermore, the link element has a target() method to create the target attribute:
此外，链接元素有一个 target() 方法来创建目标属性：

link.target('_blank')

element.linkTo()

Elements can also be linked the other way around with the linkTo() method:
也可以使用 linkTo() 方法以其他方式链接元素：

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

Alternatively, a block can be passed instead of a URL for more options on the link element:
或者，可以传递块而不是 URL 以获取链接元素上的更多选项：

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

element.unlink()

Removes the link from an element by deleting the tag:
通过删除 标记从元素中删除链接：

rect.unlink()

element.linker()

Returns the element or null if this element is not a link:
如果此元素不是链接，则返回 元素或 null：

rect.linker() // returns the link

SVG.Fragment

其他元素（Other Elements）

元素的一般处理（General Handling of svg.js elements）

Creating SVG Elements

In svg.js every element is an object which can be either created by constructing it:
在 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)

or by using a constructor method on a container:
或者通过在容器上使用构造方法：

var rect = draw.rect(100, 100)

While the last example appends the constructed element directly to the container, it has to be done manually in the former example (addTo).
虽然最后一个示例将构造的元素直接附加到容器中，但在前一个示例（addTo）中必须手动完成。

Constructing bare svg.js objects is therefore for fine control and most often not needed.
因此，构建裸 svg.js 对象是为了进行精细控制，通常不需要。

Creating SVG Elements with Attributes

svg.js allows to change attributes either through the attr() method or by calling specialized methods like move(). However, it is often easier to pass in attributes directly on construction:
svg.js 允许通过 attr() 方法或调用诸如 move() 之类的专用方法来更改属性。但是，直接在构造中传递属性通常更容易：

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

This is a shorthand for calling attr() after construction.
这是构造后调用 attr() 的简写。

SVG.Dom

SVG.Dom is the base prototype for all dom elements created by svg.js. It offers simple dom functionality like attr() and is usuable with HTML elements.
SVG.Dom 是 svg.js 创建的所有 dom 元素的基础原型。它提供了像 attr() 这样的简单 dom 功能，并且可用于 HTML 元素。

For all elements that are not described by SVG.js, the SVG.Dom class come in handy, too.
对于 SVG.js 未描述的所有元素，SVG.Dom 类也可以派上用场。

element()

returns SVG.Dom

The SVG.Dom class can be instantiated with the element() method on any element:
SVG.Dom 类可以在任何元素上使用 element() 方法进行实例化：

var element = draw.element('title')

The string value passed as the first argument is the node name that should be generated.
作为第一个参数传递的字符串值是应该生成的节点名称。

Optionally attributes can be added directly by passing them as second argument:
可以通过将可选属性作为第二个参数传递来直接添加属性：

var element = draw.element('title', {id: 'myId'})
//-> <title id="myIS"></title>

element.words()

returns itself

The SVG.Dom instance carries an additional method to add plain text:
SVG.Dom 实例带有一个额外的方法来添加纯文本：

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

SVG.Rect（矩形）

rect()

constructor on SVG.Container
returns SVG.Rect which inherits from SVG.Shape
Rects have two arguments, their width and height:
矩形有两个参数，它们的宽度和高度：

var rect = draw.rect(100, 100)

rect.radius()

returns itself
animate yes

Rects can also have rounded corners:
矩形也可以有圆角：

rect.radius(10)

This will set the rx and ry attributes to 10. To set rx and ry individually:
这会将 rx 和 ry 属性设置为 10。单独设置 rx 和 ry：

rect.radius(10, 20)

SVG.Circle（圆形）

circle()

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

The only argument necessary for a circle is the diameter:
圆唯一需要的参数是直径：

var circle = draw.circle(100)

circle.radius()

returns itself
animate yes

circle.radius(75)

SVG.Ellipse（椭圆）

SVG.Line（线）

line()

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

Create a line from point A to point B:
创建从 A 点到 B 点的直线：

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

Creating a line element can be done in four ways. Look at the plot() method to see all the possibilities.
可以通过四种方式创建线元素。查看 plot() 方法以了解所有可能性。

line.array()

returns SVG.PointArray

References the SVG.PointArray instance. This method is rather intended for internal use:
引用 SVG.PointArray 实例。此方法是供内部使用的：

polyline.array()

More info: SVG.PointArray.

line.plot()

returns itself
animate yes

Updating a line is done with the plot() method:
使用 plot() 方法更新 line：

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

Alternatively it also accepts a point string:
或者，它也接受一个点字符串：

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

Or a point array:
或者，点的数组

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

Or an instance of SVG.PointArray:
或者 SVG.PointArray 的一个实例：

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

The plot() method can also be animated:
plot() 方法也可以设置动画：

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

SVG.Polyline（折线）

SVG.Polygon（多边形）

SVG.Path（路径）

SVG.Text（文本）

text()

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

Unlike html, text in svg is much harder to tame. There is no way to create flowing text, so newlines should be entered manually. In SVG.js there are two ways to create text elements.
与 html 不同，svg 中的文本更难驯服。无法创建流畅的文本，因此应手动输入换行符。在 SVG.js 中有两种方法可以创建文本元素。

The first and easiest method is to provide a string of text, split by newlines:
第一种也是最简单的方法是提供一串文本，用换行符分隔：

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

This will automatically create a block of text and insert newlines where necessary.
这将自动创建一个文本块并在必要时插入换行符。

The second method will give you much more control but requires a bit more code:
第二种方法会给你更多的控制，但需要更多的代码：

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

As a more convinient syntax for newlines it is also possible to use the newLine() constructor instead of tspan(…).newLine():
作为换行符的更方便的语法，也可以使用 newLine() 构造函数而不是 tspan(…).newLine()：

var text = draw.text(function(add) {
  add.newLine('Same as')
  add.newLine('above').fill('#f06')
})

If you want to go the other way and don’t want to add tspans at all, just one line of text, you can use the plain() method instead:
如果您想另辟蹊径并且根本不想添加 tspan，只添加一行文本，则可以改用 plain() 方法：

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

This is a shortcut to the plain method on the SVG.Text instance which doesn’t render newlines at all.
这是 SVG.Text 实例上的普通方法的快捷方式，它根本不呈现换行符。

text.amove()

returns itself

Unlike other elements, text is usually positioned accordining to its baseline and textanchor. Svg.js gives you the possibilitie to move every shape by its upper left corner.
与其他元素不同，文本通常根据其基线和 textanchor 定位。 Svg.js 让您可以将每个形状的左上角移动。

However, sometimes it is needed to move text by baseline and anchor. This can be realized with amove()
但是，有时需要按基线和锚点移动文本。这可以通过 amove() 来实现

var text = draw.text('Some text for you')
text.amove(100, 50)

text.ax() as setter

returns itself
animate yes

Move the element by its text anchor along the x-axis only:
仅沿 x 轴通过其文本锚点移动元素：

text.ax(200)

text.ax() as getter

returns value

Without an argument the ax() method serves as a getter:
没有参数的 ax() 方法用作 getter：

var x = rect.ax()

text.ay() as setter

returns itself
animate yes

Move the element by its baseline along the y-axis only:
仅沿 y 轴移动元素的基线：

text.ay(200)

text.ay() as getter

returns value

Without an argument the ax() method serves as a getter:
没有参数的 ax() 方法用作 getter：

var x = rect.ay()

text.build()

returns itself

The build() can be used to enable / disable build mode. With build mode disabled, the plain() and tspan() methods will first call the clear() method before adding the new content. So when build mode is enabled, plain() and tspan() will append the new content to the existing content. When passing a block to the text() method, build mode is toggled automatically before and after the block is called. But in some cases it might be useful to be able to toggle it manually:
build() 可用于启用/禁用构建模式。禁用构建模式后，plain() 和 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')

text.clear()

returns itself

Clear all the contents of the called text element:
移除被调用文本元素的所有内容

text.clear()

text.length()

returns number

Gets the total computed text length of all tspans together:
获取所有 tspan 的总计算文本长度：

text.length()

text.font() as setter

returns itself

A convenience method to add font-related properties:
添加字体相关属性的便捷方法：

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

Not unlike the attr() method, the font() method also accepts a key/value pair:
与 attr() 方法不同，font() 方法也接受键/值对：

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

Available properties are:
可用的属性是：

• leading (will do the same as calling the leading() method as setter)
• anchor (will set the text-anchor attribute) family (will set the
• font-family attribute) size (will set the font-size attribute)
• stretch (will set the font-stretch attribute) style (will set the
• font-style attribute) variant (will set the font-variant attribute)
• weight (will set the font-weight attribute)

Any other property will be applied as given. So, for example, the letter-spacing property will just be applied as it would be given to the attr() method. More on font-related properties here.
任何其他属性将按照给定的方式应用。因此，例如，字母间距属性将被应用于 attr() 方法。更多关于字体相关的属性在这里。

text.font() as getter

As you might expect, the font() method also acts as a getter:
如您所料， font() 方法也充当 getter：

var leading = text.font('leading')

text.leading() as setter

returns itself
animate yes

As opposed to html, where leading is defined by line-height, svg does not have a natural leading equivalent. In svg, lines are not defined naturally. They are defined by nodes with a dy attribute defining the line height and an x value resetting the line to the x position of the parent text element. But you can also have many nodes in one line defining a different y, dy, x or even dx value. This gives us a lot of freedom, but also a lot more responsibility. We have to decide when a new line is defined, where it starts, what its offset is and what it’s height is. The leading() method in SVG.js tries to ease the pain by giving you behaviour that is much closer to html. In combination with newline separated text, it works just like html:
与 html 不同，前导由行高定义，svg 没有自然的前导等效项。在 svg 中，线条不是自然定义的。它们由具有定义行高的 dy 属性和将行重置为父文本元素的 x 位置的 x 值的 节点定义。但是您也可以在一行中有许多节点，定义不同的 y、dy、x 甚至 dx 值。这给了我们很大的自由，但也给了我们更多的责任。我们必须决定何时定义新行、从哪里开始、它的偏移量是多少以及它的高度是多少。 SVG.js 中的leading() 方法试图通过提供更接近 html 的行为来减轻痛苦。结合换行符分隔的文本，它就像 html 一样工作：

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

This will render a text element with a tspan element for each line, with a dy value of 130% of the font size.
这将为每一行呈现一个带有 tspan 元素的文本元素，其 dy 值为字体大小的 130%。

Note that the leading() method assumes that every first level tspan in a text node represents a new line. Using leading() on text elements containing multiple tspans in one line (e.g. without a wrapping tspan defining a new line) will render scrambled. So it is advisable to use this method with care, preferably only when throwing newline separated text at the text element or calling the newLine() method on every first level tspan added in the block passed as an argument to the text element.
请注意，leading() 方法假定文本节点中的每个第一级 tspan 代表一个新行。在一行中包含多个 tspan 的文本元素上使用leading()（例如，没有定义新行的包装 tspan）将呈现混乱。因此，建议谨慎使用此方法，最好仅在将换行符分隔的文本扔到文本元素上或在作为参数传递给文本元素的块中添加的每个第一级 tspan 上调用 newLine() 方法时。

text.leading() as getter

returns value

Get the current leading value:
获取当前的领先值：

var leading = text.leading()

text.path()

returns SVG.TextPath

Creates a textPath in a text element and returns the 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' })

text.textPath()

To get the textpath in a text use textPath():
要获取文本中的文本路径，请使用 textPath()：

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

text.plain()

returns itself

If the content of the element doesn’t need any styling or multiple lines, it might be sufficient to just add some plain text:
如果元素的内容不需要任何样式或多行，则只需添加一些纯文本就足够了：

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

text.rebuild()

returns itself

This is an internal callback that probably never needs to be called manually. Basically it rebuilds the text element whenerver font-size and x attributes or the leading() of the text element are modified. This method also acts a setter to enable or disable rebuilding:
这是一个内部回调，可能永远不需要手动调用。基本上它会在修改文本元素的 font-size 和 x 属性或leading() 时重建文本元素。此方法还充当设置器来启用或禁用重建：

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

text.text() as setter

returns itself

Changing text afterwards is also possible with the text() method:
之后也可以使用 text() 方法更改文本：

text.text('Brilliant!')

text.text() as getter

returns string

To get the raw text content:
要获取原始文本内容：

text.text()

text.tspan()

returns SVG.Tspan

Just adding one tspan is also possible:
也可以只添加一个 tspan：

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

SVG.TextPath（文本路径）

SVG.Tspan（跨度）

SVG.Image（图片）

image()

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

Creating images is as you might expect:
创建图像如您所料：

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

If you want to execute a callback once the image is loaded, you can pass a function as additional parameter:
如果要在加载图像后执行回调，可以将函数作为附加参数传递：

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

image.load()

returns itself

Loading another image can be done with the load() method:
可以使用 load() 方法加载另一个图像：

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

Image events

You can bind to the load and error event when loading an image.
您可以在加载图像时绑定到加载和错误事件。

This can be done as always with on:
这可以像往常一样使用 on 完成：

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

SVG.Gradient（渐变）

SVG.Stop

SVG.Pattern

SVG.Mask

SVG.ClipPath

SVG.Use

SVG.Marker（标记）

SVG.Style（样式）

SVG.ForeignObject（样式）

A foreign object can hold objects which are not from the svg namespace. Mostly this is HTML and is used together with SVG() to add html elements to it.
外来对象可以包含不来自 svg 命名空间的对象。大多数情况下这是 HTML，并与 SVG() 一起使用以向其中添加 html 元素。

foreignObject()

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

var foreignObject = draw.foreignObject(width, height)
// Pass true as second parameter to SVG() to create an html in the html-namespace
foreignObject.add(SVG('<input type="text">', true))

参考/创建元素（Referencing/Creating Elements）

使用 CSS 选择器进行引用（Referencing using CSS selectors）

SVG()

element.findOne()

SVG.find()

element.find()

引用存在的 DOM 元素（Referencing existing DOM elements）

使用 JQuery 或者 Zepto（Using jQuery or Zepto）

Circular reference

Child references

Parent references

URI references

Creating Elements

SVG()

To create a new SVG.Svg document, just call SVG()
要创建一个新的 SVG.Svg 文档，只需调用 SVG()

var draw = SVG()

To create an element from markup you can also use SVG()
要从标记创建元素，您还可以使用 SVG()

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

To create an element in the HTML namespace, pass true as second parameter to SVG()
要在 HTML 命名空间中创建元素，请将 true 作为第二个参数传递给 SVG()

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

object constructor

To create a bare svg object which is not attached to the dom use the elements constructor directly
要创建一个未附加到 dom 的裸 svg 对象，请直接使用 elements 构造函数

var rect = new SVG.Rect()