SVG.js学习

起步者@1024

已于 2023-01-18 09:24:01 修改

阅读量354

点赞数 1

分类专栏： html 文章标签：学习前端

于 2022-12-22 19:22:15 首次发布

本文链接：https://blog.csdn.net/qq_42543548/article/details/128392825

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章学习指导

该篇文章时根据SVG.Js英文文档翻译而来，可以配合英文文档一起学习，翻译是为了更好的学习，英语能力好的小伙伴可以直接移步英文文档哈。

SVG.js

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

为什么选择 SVG.js?

SVG.js 没有依赖关系，目标是尽可能小，同时提供接近完整的 SVG 规范覆盖。

安装

Npm

npm install @svgdotjs/svg.js

yarn

yarn add @svgdotjs/svg.js

CDN.js / jsDelivr

从cdnjs.com获取最新版本

使用指南

准备

创建一个基本的 Html 标记，并包括 svg.js 脚本:

  <!DOCTYPE html>
  <html>
    <head>
      <title>SVG.js</title>
      <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    </head>
    <body></body>
  </html>

或者在你的 javascript 应用程序中导入 svg.js:

import { SVG } from '@svgdotjs/svg.js'
注意:以前在全局 SVG 对象上可用的所有属性现在都需要导入，参见下面的示例:

import { SVG, extend as SVGextend, Element as SVGElement } from '@svgdotjs/svg.js'

创建 SVG 文档

接下来，使用 SVG()函数创建一个 SVG 文档，并将其添加到 html 页面。

  // 生成一个大小为300*300的svg，并添加到body标签内
  var draw = SVG().addTo("body").size(300, 300);
  // 在svg标签内生成一个100*100、颜色为#f06的rect矩形
  var rect = draw.rect(100, 100).attr({ fill: "#f06" });

您可以将任何 css 选择器传递给 addTo 或简单的节点，下面时通过 svg.Js 生成 html 代码

  <body>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="300"
      height="300"
    >
      <rect width="100" height="100" fill="#f06"></rect>
    </svg>
  </body>

js 不会自动为文档设置大小。因此，请确保使用适当的值调用 size()。eg: 要将大小设置为其父维度，请使用此命令

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

等待 DOM 被加载

这对许多人来说似乎是显而易见的，但仍然值得一提。如果你在你的文档头部包含你的js文件，请确保等待DOM被加载，用法与jQuery的ready方法相似。
```
SVG.on(document, 'DOMContentLoaded', function() {
  var draw = SVG().addTo('body')
})
```
- 如果将js放到body底部，就不是问题。

SVG.js工作在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片段中创建新的对象:

// 创建一个新的svg文档
var draw = SVG()

// 通过Id获取rect节点
var rect = SVG('#myRectId')
// 通过标签rect节点
var rect = SVG('rect')
// 通过css选择器获取节点
var path = SVG('#group1 path.myClass')

// 创建一个SVG对象
var circle = SVG('<circle>')

// 将节点转为SVG对象
var obj = SVG(node)

容器元素（Container Elements）

SVG.Container： SVG容器概念

SVG.Container类是所有可以包含其他元素的元素的基本包装器。
继承关系： SVG.Base > SVG.EventTarget > SVG.Dom > SVG.Element > SVG.Container.

SVG.Svg：svg对象相关操作

SVG.js初始化函数在给定元素中创建一个svg根节点，并返回一个svg.svg实例

SVG()：创建一个svg的方法

返回SVG.Svg，它继承自SVG.Container

var draw = SVG().addTo('#drawing')
注意：只调用SVG()时，将创建一个不可见的< svg >保存在内存中，并没有添加到页面dom上。
SVG文档也可以在另一个SVG文档中创建。然后它被称为嵌套SVG文档:

nested()：内嵌一个svg的方法

SVG.Container的构造函数，在调用的SVG容器内创建一个内嵌svg;

var draw = SVG().addTo('body').size(300, 300)
var nested = draw.nested()
var rect = nested.rect(200, 200)

生成的html：

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="300" height="300">
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs">
            <rect width="200" height="200"></rect>
        </svg>
    </svg>

SVG.G: svg的分组g节点操作

如果您希望将一组元素转换为一个元素，则对元素进行分组可能非常有用。一个组中的所有元素，保持它们相对于所属组的位置
注意:组没有自己的几何图形，它是从它们的内容继承的。因此，组不会监听x、y、宽度和高度属性。如果这不是您需要的，请使用nested()方法代替。

group()：创建一个分组g的方法

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

var draw = SVG().addTo('body').size(300, 300)
var group = draw.group()
group.path('M10,20L30,40')

生成的html

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="300" height="300">
    <g>
        <path d="M10,20L30,40"></path>
    </g>
</svg>

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

group.add(react)

SVG.Symbol： svg的symbol标签操作

和group元素一样，symbol元素也是一个容器元素。符号和组之间的唯一区别是不呈现符号。因此，symbol元素与use元素结合使用是很理想的:

var draw = SVG().addTo('body').size(300, 300)
var symbol = draw.symbol()
symbol.rect(100, 100).fill('#f09')
var use  = draw.use(symbol).move(200, 200)

生成的svg

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="300" height="300">
   <symbol id="SvgjsSymbol1000">
         <rect width="100" height="100" fill="#ff0099"></rect>
     </symbol>
     <use xlink:href="#SvgjsSymbol1000" x="200" y="200"></use>
 </svg>

SVG.Defs： svg的defs标签操作

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

defs()：创建defs标签方法

 var draw = SVG().addTo('body').size(300, 300)
 // 1. 方式一：通过svg容器创建defs标签
 var defs = draw.defs() 
 // 2. 方式二：通过svg内的子节点的root方法找到svg节点创建defs标签
 var rect = draw.rect(200, 200)
 var defs = rect.root().defs()

SVG.A

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

link():

所有子元素都可以创建一个超链接。下面方法先创建了一个 a 元素，再嵌入 rect 元素。

var link = draw.link("http://bilibili.com");
var rect = link.rect(100, 100);

// link对象的方法
// 修改 href 属性
link.to("http://apple.com");
// 修改 target 属性
link.target("_blank");
// 也是修改 href 属性，不过这个是通过子元素的方法修改的。
rect.linkTo("http://svgdotjs.github.io/");
// 可以传递一个方法来代替URL，以获得link元素的更多选项:
rect.linkTo(function (link) {
  link.to("http://svgdotjs.github.io/").target("_blank");
});
// 创建 xlink:show 属性
link.show("replace");

其它元素

svg.js元素的一般处理

创建SVG元素

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

import { Rect } from "@svgdotjs/svg.js"
// 新建一个rect标签添加到svg节点中
var rect = new Rect().size(100, 100).addTo(draw)
// 或者使用已经存在的节点
var rect = new Rect(node).size(100, 100)

或者在容器上使用构造函数方法:

var rect = draw.rect(100, 100)

创建带有属性的svg元素对象

Svg.js允许通过attr()方法或调用专门的方法(如move())来更改属性。然而，在构造时直接传入属性通常更容易:

var draw = SVG().addTo('body').size(300, 300)

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

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

SVG.Dom

SVG.Dom是所有由svg.js创建的Dom元素的基本原型。它提供了简单的dom功能，如attr()，可用于HTML元素。
对于SVG.js中没有描述的所有元素，SVG.jsDom类也派上了用场

element(): 创建dom的方法

SVG.Dom类可以在任何元素上用element()方法实例化

var draw = SVG().addTo('body').size(300, 300)
var element = draw.element('title')
//-> <title></title>

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

element.words()：添加纯文本的方法

SVG.Dom实例携带了一个额外的方法来添加纯文本:

var draw = SVG().addTo('body').size(300, 300)
var element = draw.element('title').words('This is a title.')
//-> <title>This is a title.</title>

SVG.Rect

rect(): 创建rect矩形的方法

矩形有两个参数，它们是width和height:

var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100)
// -> <rect width="150" height="200"></rect>

rect.radius(): 给rect矩形添加圆角方法

矩形也可以有圆角:

var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100)
rect.radius(10)
// -> <rect width="100" height="100" rx="10" ry="10"></rect>

也可分别设置rx和ry：

var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100)
rect.radius(10, 20)
// -> <rect width="100" height="100" rx="10" ry="20"></rect>

SVG.Circle

circle(): 创建circle圆的方法

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

var draw = SVG().addTo('body').size(300, 300)
var circle = draw.circle(100)
// -> <circle r="50" cx="50" cy="50"></circle>

circle.radius()：设置圆的半径的方法

通过radius方法来设置圆的半径

var draw = SVG().addTo('body').size(300, 300)
var circle = draw.circle(100)
circle.radius(60)
// -> <circle r="60" cx="50" cy="50"></circle>

SVG.Ellipse

ellipse()：设置ellipse椭圆的方法

椭圆有两个参数，分别是宽度和高度:

var draw = SVG().addTo('body').size(300, 300)
var ellipse = draw.ellipse(200, 100)
// -> <ellipse rx="100" ry="50" cx="100" cy="50"></ellipse>

ellipse.radius() : 定义椭圆的半径的方法

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

var draw = SVG().addTo('body').size(300, 300)
var ellipse = draw.ellipse(200, 100)
ellipse.radius(75, 40)
// -> <ellipse rx="75" ry="40" cx="100" cy="50"></ellipse>

SVG.Line

line(): 创建line线条的方法

从点a到点B画一条直线:

var draw = SVG().addTo('body').size(300, 300)
var line = draw.line(0, 0, 100, 150).stroke({ width: 1,color: 'black' })
// -> <line x1="0" y1="0" x2="100" y2="150" stroke-width="1" stroke="black"></line>

line.plot(): 修改line节点方法

更新line是用plot()方法完成的:

var draw = SVG().addTo('body').size(300, 300)
var line = draw.line(0, 0, 100, 150).stroke({ width: 1,color: 'black' })

// 方式一： 逗号隔开的数字
line.plot(50, 30, 100, 150)
// -> <line x1="50" y1="30" x2="100" y2="150" stroke-width="1" stroke="black"></line>

// 方式二： 空格隔开的两个坐标字符串
line.plot('0,0 100,150')
// -> <line x1="0" y1="0" x2="100" y2="150" stroke-width="1" stroke="black"></line>

// 方式三： 坐标组成的二维数组
line.plot([[0, 0], [100, 150]])
// -> <line x1="0" y1="0" x2="100" y2="150" stroke-width="1" stroke="black"></line>

// 方式四： 使用SVG.PointArray代替
var array = new SVG.PointArray([[0, 0], [100, 150]])
line.plot(array)
// -> <line x1="0" y1="0" x2="100" y2="150" stroke-width="1" stroke="black"></line>

// 可以给lint添加动画
line.animate(3000).plot([[200, 200], [100, 150]])

SVG.Polyline

Polyline(): 创建一个折线

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

var draw = SVG().addTo('body').size(300, 300)
// 折线字符串由逗号或空格分隔的点列表组成。所以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').fill('none').stroke({ width: 1, color: 'black' })
// -> <polyline points="0,0 100,50 50,100" fill="none" stroke-width="1" stroke="black"></polyline>

// 一个二维数组也可以工作:
var polyline = draw.polyline([[0,0], [100,50], [50,100]]).fill('none').stroke({ width: 1, color: 'black' })
// -> <polyline points="0,0 100,50 50,100" fill="none" stroke-width="1" stroke="black"></polyline>

// 一个一维数组参数
var polyline = draw.polyline([0,0, 100,50, 50,100]).fill('none').stroke({ width: 1, color: 'black' })
// -> <polyline points="0,0 100,50 50,100" fill="none" stroke-width="1" stroke="black"></polyline>

polyline.plot(): 修改polyLine节点的方法

折线可以使用plot()方法更新:

var draw = SVG().addTo('body').size(300, 300)
var polyline = draw.polyline([[0,0], [100,50], [50,100], [150,50], [200,50]]).fill('none').stroke({ width: 1, color: 'black' })
polyline.plot([[0,0], [100,50], [50,100], [150,50], [200,50], [250,100], [300,50], [350,50]])
// -> <polyline points="0,0 100,50 50,100 150,50 200,50 250,100 300,50 350,50" fill="none" stroke-width="1" stroke="black"></polyline>

SVG.Polygon

polygon(): 绘制多边形的方法

与polyline元素不同，polygon元素定义了一个由一组连接的直线段组成的闭合形状:

var draw = SVG().addTo('body').size(300, 300)
var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1, color: 'black' })
// -> <polygon points="0,0 100,50 50,100" fill="none" stroke-width="1" stroke="black"></polygon>

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

polygon.plot(): 修改多边形的方法

像折线一样，多边形可以使用plot()方法更新:

var draw = SVG().addTo('body').size(300, 300)
var polygon = draw.polygon('0,0 100,50 50,100').fill('none').stroke({ width: 1, color: 'black' })
polygon.plot([[0,0], [100,50], [50,100], [150,50], [200,50]])
// -> <polygon points="0,0 100,50 50,100 150,50 200,50" fill="none" stroke-width="1" stroke="black"></polygon>

SVG.Path

path(): 创建一个路径节点

路径字符串类似于多边形字符串，但要复杂得多，以便支持曲线:

var draw = SVG().addTo('body').size(300, 300)
draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
// -> <path d="M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z"></path>

path.length()：获取路径的长度

获取路径元素的总长度:

var draw = SVG().addTo('body').size(300, 300)
 var path = draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
// -> <path d="M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z"></path>
var length = path.length()
console.log(length);  // 381.474609375

path.pointAt()：获取给定长度的点坐标

获取给定长度路径上的一个点:

 var draw = SVG().addTo('body').size(300, 300)
 var path = draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
 var point = path.pointAt(105)
 console.log(point); // {x: 49.61837387084961, y: 49.61252212524414}

path.plot()：修改路径的方法

路径可以使用plot()方法更新:

var draw = SVG().addTo('body').size(300, 300)
var path = draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
path.plot('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
// -> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"></path>

// 2s动画，深度循环
// 在SVG.js中只有对动画路径的基本支持，这意味着只有使用相同命令(M,C,S等)的路径是可动画的
path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)

path.text(): 创建带有文本元素的path

可以使用text()方法创建一个带有链接到当前路径的textpath的文本元素:

var draw = SVG().addTo('body').size(300, 300)
var path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80').fill('none').stroke({ width: 1, color: 'black' })
var textpath = path.text('SVG.js rocks!')
/* -> 
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke-width="1" stroke="black" id="SvgjsPath1000"></path>
    <text>
        <textPath xlink:href="#SvgjsPath1000">
            <tspan dy="20.8" x="0">SVG.js rocks!</tspan>
        </textPath>
    </text>
*/

SVG.Text

text()：创建文本方法

与html不同，svg中的文本很难控制。没有办法创建流动文本，所以换行符应该手动输入。在SVG.js中有两种方法来创建文本元素

var draw = SVG().addTo('body').size(300, 300)
// 方法一： 也是最简单的方法是提供一个由换行符分隔的文本字符串:
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
/* -> 
<text>
	<tspan dy="20.8" x="0">Lorem ipsum dolor sit amet consectetur.</tspan>
	<tspan dy="20.8" x="0">Cras sodales imperdiet auctor.</tspan>
</text>
*/

// 方法二： 会给你更多的控制，但需要更多的代码:
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>
	<tspan dy="20.8" x="0">Lorem ipsum dolor sit amet </tspan>
	<tspan fill="#ff0066">consectetur</tspan>
	<tspan>.</tspan><tspan dy="20.8" x="0" dx="20">Cras sodales imperdiet auctor.</tspan>
	<tspan dy="20.8" x="0">Nunc ultrices lectus at erat</tspan>
	<tspan dy="20.8" x="0">dictum pharetra elementum ante</tspan>
</text>
*/

// 如果你想走另一种方式，根本不想添加tspan，只是一行文本，你可以使用plain()方法:
var text = draw.plain('Lorem ipsum dolor sit amet consectetur.')
// -> <text>Lorem ipsum dolor sit amet consectetur.</text>

text.build() : 选择构建模式

build()可用于启用/禁用构建模式。在禁用构建模式的情况下，plain()和tspan()方法将在添加新内容之前首先调用clear()方法。当构建模式启用时，plain()和tspan()将把新内容追加到现有内容。当将块传递给text()方法时，构建模式会在调用块之前和之后自动切换。但在某些情况下，手动切换可能会很有用:

var draw = SVG().addTo('body').size(300, 300)
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>
	<tspan dy="20.8" x="0">This is just the start, </tspan>
	<tspan fill="#00ff97">something pink in the middle </tspan>
	and again boring at the end.
</text>
*/

text.build(false) // disables build mode
text.plain('and again boring at the end.')
// -> <text>and again boring at the end.</text>

text.length(): 计算文本长度

获取所有tspan的总计算文本长度:

var draw = SVG().addTo('body').size(300, 300)
var text = draw.text('This is just the start, ')
var len = text.length()
console.log(len); // 152.3125

text.font(): 设置字体

添加字体相关属性的简便方法:

var draw = SVG().addTo('body').size(300, 300)
var text = draw.text('This is just the start, ')
text.font({
    family: 'Helvetica'
    , size: 144
    , anchor: 'middle'
    , leading: '1.5em'
})
/* ->
<text font-family="Helvetica" font-size="144" text-anchor="middle">
	<tspan dy="216" x="0">This is just the start, </tspan>
</text>
*/

// 与attr()方法不同，font()方法也接受键/值对
text.font('family', 'Menlo')

可用属性为:
- 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)

text.path()：文本路径

在文本元素中创建一个textPath并返回textPath:

var draw = SVG().addTo('body').size(1000, 300)
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 xlink:href="#SvgjsPath1000" font-size="42.5" font-family="Verdana">
		<tspan>We go </tspan>
		<tspan fill="#ff0099" dy="-40">up</tspan>
		<tspan dy="40">, then we go down, then up again</tspan>
	</textPath>
</text>
<defs>
	<path d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100" id="SvgjsPath1000"></path>
</defs>
*/

text.textPath(): 获取text的textPath节点对象

要获得文本中的文本路径，使用textpath ():

var draw = SVG().addTo('body').size(1000, 300)
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' })

// 获取text的textPath，并设置属性startOffset偏移 20%
var textpath = text.textPath().attr('startOffset', '20%')
/* ->
<textPath xlink:href="#SvgjsPath1000" font-size="42.5" font-family="Verdana" startOffset="20%">	
	<tspan>We go </tspan>
	<tspan fill="#ff0099" dy="-40">up</tspan>
	<tspan dy="40">, then we go down, then up again</tspan>
</textPath>
*/

text.plain()：只设置text的纯文本内容

如果元素的内容不需要任何样式或多行，添加一些纯文本可能就足够了:

var draw = SVG().addTo('body').size(1000, 300)
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
text.plain('I do not have any expectations.')
// -> <text>I do not have any expectations.</text>

text.rebuild(): 有text.build方法功能

这是一个内部回调，可能永远不需要手动调用。基本上，只要文本元素的font-size和x属性或leading()被修改，它就会重新构建文本元素。这个方法还充当一个setter来启用或禁用重建:
```
text.rebuild(false) //-> disables rebuilding
text.rebuild(true)  //-> enables rebuilding and instantaneously rebuilds the text element
```

text.text() : 设置并且获取text节点

使用text()方法也可以更改并且获取节点；

var draw = SVG().addTo('body').size(1000, 300)
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
var content = text.text('Brilliant!')
// -> <tspan dy="20.8" x="0">Brilliant!</tspan>
console.log(content); // text节点dom

text.tspan()：在text节点内创建一个tspan标签

创建一个tspan标签

var draw = SVG().addTo('body').size(1000, 300)
var text = draw.text("Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.")
text.tspan(' on a train...').fill('#f06')
// -> <tspan fill="#ff0066"> on a train...</tspan>

SVG.TextPath

textPath()：创建一个textPath节点

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

var draw = SVG().addTo('body').size(1000, 300)
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')
/* -> 
 <text>
    <textPath xlink:href="#SvgjsPath1000">
         <tspan dy="20.8" x="0">Some Text along a path</tspan>
     </textPath>
 </text>
 <defs>
     <path d="M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100"
         id="SvgjsPath1000"></path>
 </defs>
*/

textPath.plot(): 修改textPath节点

修改textpath元素的路径:

var draw = SVG().addTo('body').size(300, 1000)
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')
textpath.plot('M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200')

/* ->
<text>
	<textPath xlink:href="#SvgjsPath1000">
		<tspan dy="20.8" x="0">Some Text along a path</tspan>
	</textPath>
</text>
<defs>
	<path d="M 300 500 C 200 100 300 0 400 100 C 500 200 600 300 700 200" id="SvgjsPath1000"</path>
</defs>
*/

text.textPath()：获取textPath节点

直接引用textPath节点:

textPath.track()：获取path节点

直接引用path元素:

Events for SVG.Text： text的事件

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

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

SVG.Tspan

tspan(): 创建一个tspan元素节点

tspan元素只能在文本元素或其他tspan元素中使用。
```
text.tspan('spannened')
// -> <tspan>spannened</tspan>
```

tspan.clear(): 清楚原来的内容

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

text.tspan('spannened')
tspan.clear()
// -> <tspan></tspan>

tspan.dx(): 修改元素的动态x值

定义元素的动态x值，就像一个带有position:relative和left定义的html元素:

tspan.dx(30)

tspan.dy(): 修改元素的动态y值

定义元素的动态y值，就像一个带有position:relative和top定义的html元素:

tspan.dy(30)

tspan.plain(): 添加一些纯文本

只是添加了一些纯文本:

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

tspan.length(): 获取tspan节点的总长度

获取计算文本的总长度:

tspan.length()

tspan.newLine(): 换行方法

newLine()是一个方便的方法，用于使用当前的“leading”添加带有dy属性的新行

var draw = SVG().addTo('body').size(300, 1000)
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('consectetur').fill('#f06')
    add.tspan('Nunc ultrices lectus at erat').newLine()
    add.tspan('dictum pharetra elementum ante').newLine()
})

tspan.text(): 修改tspan的内容

更新tspan的内容。这可以通过传递字符串来实现:

tspan.text('Just a string.')

tspan.tspan()：嵌套tspan

添加一个嵌套的tspan:

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

SVG.Image

image(): 创建一个image节点

创建图像正如你所期望的那样:

var draw = SVG().addTo('body').size(300, 1000)
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
})

image.load(): 加载资源

加载另一张图片使用load()方法完成

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

Image events: image的事件

加载图像时，可以绑定到load和error事件。

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

SVG.Gradient

gradient(): 创建线性或者径向渐变节点

有线性渐变和径向渐变。线性渐变可以像这样创建:

var draw = SVG().addTo('body').size(300, 1000)

// 创建一个从左到右的，颜色#333到#fff的水平渐变
var gradient = draw.gradient('linear', function (add) {
     add.stop(0, '#333')
     add.stop(1, '#fff')
 })

 var rect = draw.rect({x: 100, y: 100, width: 100, height: 100})
 // 使用创建的渐变
 rect.attr({ fill: gradient }) // or:  rect.fill(gradient)

gradient.stop(): 向渐变节点里添加新的渐变内容（偏移量和颜色必填）

偏移量和颜色参数是必须的停止，不透明度是可选的。偏移量是0到1之间的一个浮点数，或者一个百分比值(例如33%)。

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

gradient.url(): 返回渐变的url引用

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

gradient.from()：定义渐变方向

定义从x, y到x, y的方向:

gradient.from(0, 0).to(0, 1) // from和to值也用百分比表示。

gradient.get(): 获取停止点

get()方法可以更容易地从现有的渐变中获取一个停止节点:

var draw = SVG().addTo('body').size(300, 1000)
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

gradient.radius()：通过定义最外层的半径到内部颜色

径向渐变有一个radius()方法来定义最外层的半径到内部颜色应该发展的地方:

var draw = SVG().addTo('body').size(300, 1000)
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.3)
var rect = draw.rect({ x: 100, y: 100, width: 100, height: 100 })
rect.attr({ fill: gradient })

gradient.to()：定义渐变方向

定义从x, y到x, y的方向:

gradient.from(0, 0).to(0, 1) // from和to值也用百分比表示。

gradient.update(): 更新渐变

渐变也可以在之后更新:

// 渐变创建之后更新
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)

SVG.Stop 停止元素

停止元素只能在渐变元素中使用。

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

stop.update() 更新渐变点

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

SVG.Pattern

pattern(): 创建一个pattern标签，类似于渐变方法

创建一个pattern标签，非常类似于创建渐变:

var draw = SVG().addTo('body').size(300, 1000)
// 这将创建一个20 x 20像素的方格图案。您可以向模式中添加任何可用元素。
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)
})
/* -> 
<defs>
	<pattern x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" id="SvgjsPattern1000">
		<rect width="20" height="20" fill="#ff0066"></rect>
		<rect width="10" height="10"></rect>
		<rect width="10" height="10" x="10" y="10"></rect>
	</pattern>
</defs>
*/

// 使用创建的pattern
rect.attr({ fill: pattern }) // or: rect.fill(pattern)
// -> <rect width="100" height="100" fill="url(#SvgjsPattern1000)"></rect>

pattern.url()：获取创建的pattern的引用名称

获取创建的pattern的引用名称

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

pattern.update(): 修改创建的pattern的节点

模式也可以在之后更新，会清楚之前的pattern节点的内容：
```
pattern.update(function(add) {
  add.circle(15).center(10,10)
})
```

SVG.Mask

mask()：创建一个mask的标签

在svg里创建一个mask标签，与渐变和pattern类似

var draw = SVG().addTo('body').size(300, 1000)
var ellipse = draw.ellipse(80, 40).move(10, 10).fill('#123')
var mask = draw.mask().add(ellipse)
var rect = draw.rect().size(100,100)
rect.maskWith(mask)
/* ->
<defs>
    <mask id="SvgjsMask1000">
        <ellipse rx="40" ry="20" cx="50" cy="30" fill="#112233"></ellipse>
    </mask>
</defs>
<rect width="100" height="100" mask="url('#SvgjsMask1000')"></rect>
*/

// 也可以在mask节点里生成多个元素
var ellipse = draw.ellipse(80, 40).move(10, 10).fill({ color: '#123' })
var text = draw.text('SVG.JS').move(10, 10).font({ size: 36 }).fill({ color: '#123' })
var mask = draw.mask().add(text).add(ellipse)

maskWith(): 在显示节点上使用mask元素

在显示节点上使用mask元素

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

mask.unmask(): 删除显示节点绑定的mask元素

删除显示节点绑定的mask元素

rect.unmask()

mask.remove(): 删除mask

完全删除mask也将unmask()所有蒙版元素:

mask.remove()

element.masker(): 获取显示节点引用的mask元素

获取显示节点引用的mask元素

rect.masker().fill('#123') //修改rect元素引用的mask元素的fill属性为#123

SVG.ClipPath

clip()：创建一个ClipPath元素

在svg里创建一个ClipPath元素，功能与mask相似

var draw = SVG().addTo('body').size(300, 1000)
var rect = draw.rect().size(100, 100)
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)

/* ->
<rect width="100" height="100" clip-path="url(';#SvgjsClipPath1000&quot;')"></rect>
<defs>
	<clipPath id="SvgjsClipPath1000">
		<text x="10" y="6.200000762939453" font-size="36">
			<tspan dy="46.800000000000004" x="10">SVG.JS</tspan>
		</text>
		<ellipse rx="40" ry="20" cx="50" cy="30"></ellipse>
	</clipPath>
</defs>
*/

clipWith(): 在显示节点上使用clipPath元素

在显示节点上使用clipPath元素

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

clipPath.unclip(): 删除显示节点绑定的clipPath元素

删除显示节点绑定的clipPath元素

rect.unclip()

clipPath.remove(): 删除clipPath

同时删除clipPath，也会unclip()所有clipPath里的元素:

clip.remove()

element.clipper()：获取显示节点引用的clipPath元素

rect.clipper().move(10, 10) //修改rect元素引用的clipPath元素并将其x，y轴移动10

SVG.Use

use()：创建一个use节点

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

var draw = SVG().addTo('body').size(300, 1000)
var rect = draw.rect(100, 100).fill('#f09')
var use = draw.use(rect).move(200, 200)
// -> <rect width="100" height="100" fill="#ff0099" id="SvgjsRect1000"></rect>
// -> <use xlink:href="#SvgjsRect1000" x="200" y="200"></use>

在上面的例子中，两个矩形将出现在svg绘图上，原始的和使用实例。在某些情况下，您可能希望隐藏原始元素。最好的方法是在defs节点中创建原始元素:
```
var rect = draw.defs().rect(100, 100).fill('#f09')
var use  = draw.use(rect).move(200, 200)
```
另一种方法是指向一个外部SVG文件，只需指定元素id和文件路径

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

SVG.Marker

marker(): 添加标记

标记可以添加到线，折线，多边形和路径的每一个单独的点。有三种类型的标记:开始，中间和结束。start表示第一个点，end表示最后一个点，mid表示中间的每一个点。

var draw = SVG().addTo('body').size(300, 1000)
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
path.marker('start', 10, 10, function (add) {
	add.circle(10).fill('#f06')
})
// 在path路径中间添加marker
path.marker('mid', 10, 10, function (add) {
	add.rect(5, 10).cx(5).fill('#ccc')
})
// 在path路径结尾添加marker
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')
})

// 实例二
// 单独在svg里创建一个marker， 会在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')
})

// 可以将单独创建的marker元素应用到目标元素上
path.marker('mid', marker)

marker.height()：设置markerHeight属性方法

设置markerHeight属性

marker.height(10)

marker.ref(): 设置marker节点的refX和refY属性

设置marker节点的refX和refY属性

marker.size(10, 10)

marker.update(): 修改marker节点的内容

修改marker节点的内容，同时清楚之前marker节点里的内容
```
marker.update(function(add) {
  add.circle(10)
})
```

marker.width()：设置markerWidth属性方法

设置markerWidth属性

marker.width(10)

SVG.Style

style()：创建一个style标签

rule()：向style标签里添加样式规则

var draw = SVG().addTo('body').size(300, 1000)
var style = draw.style()
style.rule('.myClass', { fontSize: '16px', color: 'red', fill: 'red' })
// -> <style>.myClass{font-size:16px;color:red;fill:red;}</style>
draw.text("123").attr({ class: 'myClass' })
// -> <text class="myClass"><tspan dy="20.8" x="0">123</tspan></text>

SVG.ForeignObject

foreignObject(): 在svg标签内添加外部对象

外部对象可以保存不是来自svg名称空间的对象。这主要是HTML，并与SVG()一起使用，向其中添加HTML元素。

var draw = SVG().addTo('body').size(300, 1000)
var foreignObject = draw.foreignObject(100, 100)
foreignObject.add(SVG(`<div><input type="text"/></div>`))
/* -> 
<foreignObject width="100" height="100">
	<div>
		<input type="text">
	</div>
</foreignObject>
*/

使用选择器

SVG(): 返回文档匹配的第一个元素

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

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

element.findOne()：返回调用节点里匹配的第一个元素

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

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

SVG.find(): 返回实例的所有匹配的svg元素

实例中返回所有与选择器匹配的svg元素

var list = SVG.find('.someClass')
list.fill('#f06')

// 它还允许第二个参数，它是一个应该搜索的节点:
var list = SVG.find('.someClass', group)
list.fill('#f06')

element.find(): 搜索元素下面的选择器匹配的所有svg元素

这将搜索元素下面的选择器匹配的所有svg元素，并在svg实例中返回它们列表:
```
var list = group.find('.someClass')
list.fill('#f06')
```

引用现有DOM元素

如果你想让SVG.js采用一个现有的DOM元素，你可以使用SVG():

var polygon = document.createElementNS('http://www.w3.org/2000/svg', 'polygon')
var element = SVG(polygon)
element.fill('#f06')

获取子节点操作

children(): 所有子节点

所有子元素的列表可以用children方法检索

draw.children()

clear(): 清楚所有子节点

删除父元素中的所有元素:

draw.clear()

each()：遍历子节点

each()允许你遍历一个元素的所有子元素

 // 第二个参数控制深度遍历
draw.each(function (i, children) {
    this.fill({ color: '#f06' })
}, true)

first()：第一个子元素

获取父元素的第一个子元素:

drwa.first()

get(index)：获取指定index位置的子元素

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

var draw = SVG().addTo('body').size(300, 1000)
var rect   = draw.rect(20, 30)
var circle = draw.circle(50)

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

has()：检查子元素是否存在

判断一个父元素是否有对应的子元素

var draw = SVG().addTo('body').size(300, 1000)
var rect  = draw.rect(100, 50)
var group = draw.group()

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

index()：获取子元素的位置

返回给定元素的下标，如果不是子元素则返回-1:

var draw = SVG().addTo('body').size(300, 1000)
var rect  = draw.rect(100, 50)
var group = draw.group()

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

last()：返回最后一个子元素

获取父元素的最后一个子元素:

draw.last()

获取父节点的操作

root()：获取当前元素的SVG根元素

要检索根SVG，可以使用root()

var draw = SVG().addTo('body').size(300, 1000)
var draw = SVG().addTo('#drawing')
var rect = draw.rect(100, 100)

rect.root() //-> returns draw

parent()：获取父元素

可以获取父元素，也可以根据需寻找的父元素通过第一个参数（选择器）找到对应子元素

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

parents(): 获取所有祖先元素

获取元素的所有祖先，直到并包括传递的匹配器或元素使用

var draw   = SVG().addTo('#drawing')
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 references

reference()：找到回去链接元素的元素

在元素通过属性链接到另一个元素的情况下，可以使用reference()方法获取链接的元素实例

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()：创建一个元素

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

object constructor：通过构造器创建

var rect = new SVG.Rect()

属性

attr()：设置或者获取属性

通过不同传参来设置或者获取属性

// 设置单一属性
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)

// 获取某个属性
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.cx(20).cy(60)
circle.x(50).y(40)

move()：移动元素

移动元素的左上角到给定的x和y位置:

rect.move(200, 350)

x()：移动 / 获取元素左上角 x轴位置

移动 / 获取元素左上角 x轴位置

// 移动元素左上角 X轴位置
rect.x(200)

// 获取元素左上角 x轴位置
var x = rect.x()

y()：移动 / 获取元素左上角 y轴位置

移动 / 获取元素左上角 y轴位置

// 移动元素左上角 轴位置
rect.y(200)

// 获取元素左上角 y轴位置
var y = rect.y()

center()：设置元素中心的cx和cy位置

移动元素的中心到给定的cx和cy位置

rect.center(150, 150)

cx()：移动 / 获取元素圆心 x轴位置

移动 / 获取元素圆心 x轴位置

// 移动元素圆心 X轴位置
rect.cx(200)

// 获取元素圆心 x轴位置
var cx = rect.cx()

cy()：移动 / 获取元素圆心 y轴位置

移动 / 获取元素圆心 y轴位置

// 移动元素圆心 y轴位置
rect.cy(200)

// 获取元素圆心 y轴位置
var cx = rect.cy()

dmove()：相对于当前位置，在x，y轴方向移动元素

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

rect.dmove(10, 30)
注意:当使用dmove()(和dx()或dy()时，总是确保你提供的值与元素最初所在的单位相同。因此，如果元素在x:10%，则使用element.dx(‘5%’)而不是element.dx(‘5px’)。

dx()：相对于当前位置，在x方向上移动元素:

相对于当前位置，在x方向上移动元素:

rect.dx(200)

dy()：相对于当前位置，在y方向上移动元素:

相对于当前位置，在y方向上移动元素:

rect.dy(200)

尺寸大小

size()：将元素的大小设置为给定的宽度和高度:

将元素的大小设置为给定的宽度和高度:

// width和height设置指定的大小
rect.size(200, 300)

// 比例调整大小也可以通过省略高度:
rect.size(200)

// 通过传递null作为width的值:
rect.size(null, 200)

width()：设置 / 获取元素的宽度

设置 / 获取元素的宽度

// 设置元素的宽度
rect.width(200)

// 获取元素的宽度
var width = rect.width()

height()：设置 / 获取元素的高度

设置 / 获取元素的高度

// 设置元素的宽度
rect.height(200)

// 获取元素的宽度
var height= rect.height()

radius()：定义圆角

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

// 定义圆的圆角
circle.radius(10)

// 定义椭圆的圆角
ellipse.radius(10, 20)

// 定义矩形的圆角
rect.radius(5)

语法糖

fill()：设置颜色属性

fill()方法是attr()方法的一个很好的替代方法:

rect.fill({ color: '#f06', opacity: 0.6 })
rect.fill('#f06')
rect.fill('images/shade.jpg')
rect.fill(draw.image('images/shade.jpg', function() {
  this.size(20, 20)
}))

stroke()：类似于fill方法

设置元素描边的属性

rect.stroke({ color: '#f06', opacity: 0.6, width: 5 })
rect.stroke('#f06')
rect.stroke('images/shade.jpg')
rect.stroke(draw.image('images/shade.jpg', 20, 20))

opacity()：设置透明属性

设置一个元素的整体不透明度:

rect.opacity(0.5)

Transforming

transform()：设置 / 获取元素的transform属性

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

为了使语法尽可能简单，可以用不同的方式传入参数:
- translation: translate: {x: 50, y: 50}, translate: [50, 50], translateX: 50, translateY: 50, tx: 50, ty: 50
- rotate: rotate: 50
- scale: scale: 2, scale: [2,2], scaleX: 2, scaleY: 2
- shear/skew: skew: [10, 10], skewX: 10, skewY: 10, shear: 3
- flip: both, true, x, y
- origin: origin: {x: 50, y: 50}, origin: [50, 50], origin: 50, originX: 50, originY: 50, ox: 50, oy: 50
- origin can also be a up to 2 words speciying the corners of the element: center, top, bottom, left, right
- position: position: {x: 50, y: 50}, position: [50, 50], positionX: 50, positionY: 50, px: 50, py: 50
- absolute position of the origin after all transformations are applied
- relative: relative: {x: 50, y: 50}, relative: [50, 50], relativeX: 50, relativeY: 50, rx: 50, ry: 50

flip()：反转元素

rotate()方法将根据反转方向反转元素:

// x轴反转
element.flip('x')
// y轴反转
element.flip('y')

// x,y轴同时反转
element.flip()
element.flip('both')
element.flip(true)

rotate()：旋转元素

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

// 相对中心旋转角度
element.rotate(45)

// 指定点旋转角度
// rotate(degrees, cx, cy)
element.rotate(45, 50, 50)

skew()：缩放元素

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()：平移元素

translate()方法将接受一个x和y值

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

Styles

css()：设置 / 获取元素样式

设置 / 获取元素样式

// 设置单一样式
element.css('cursor', 'pointer')
// 设置多个样式
element.css({ cursor: 'pointer', fill: '#f03' })
// 删除样式
element.css('cursor', null)

// 获取单个样式
element.css('cursor') // => pointer
// 获取所有样式
element.css() // => {cursor:pointer;fill:#f03;}
// 获取指定样式
element.css(['cursor', 'fill']) // => {cursor:pointer;fill:#f03;}

hide()：隐藏元素（不占位）

隐藏元素（将元素的display设置为none）

element.hide()

show()：显示元素

显示元素（将元素的display设置为unset）

element.show()

类名

addClass()：添加类名

添加一个类名

element.addClass("pink-flower")

classes()：获取元素类名

以数组形式获取元素的类名

element.classes()

hasClass()：判断元素是否有给定的类名

测试元素是否有指定类名

element.hasClass("purple-rain")

removeClass()：移除元素的类名

移除元素的指定类名

element.removeClass('pink-flower')

toggleClass()：切换元素类名

对元素的某个类名进行切换

element.toggleClass('pink-flower')

Data

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

data()：设置 / 获取指定的元素上的属性

设置 / 获取指定的元素上的属性

var draw = SVG().addTo('body').size(300, 1000)
var rect = draw.rect().size(100, 100)
// 设置单个属性数据
rect.data('key', { value: { data: 0.3 }})
// -> <rect width="100" height="100" data-key="{'value':{'data':0.3}}"></rect>

// 设置多个属性数据
rect.data({
    forbidden: 'fruit'
    , multiple: {
        values: 'in'
        , an: 'object'
    }
})
// -> <rect width="100" height="100" data-key="{'value':{'data':0.3}}" data-forbidden="fruit" data-multiple="{'values':'in','an':'object'}"></rect>

var key = rect.data('key')
console.log(key) // { value: { data: 0.3 }}

// 移除属性数据
rect.data('key', null)

Memory

remember() ：设置 / 获取保存在元素上的值

设置 / 获取保存在元素上的值

var draw = SVG().addTo('body').size(300, 1000)
var rect = draw.rect().size(100, 100)

// 在rect上保存oldBBox为key的 value为rect.bbox()方法返回的值
rect.remember('oldBBox', rect.bbox())
console.log(rect.bbox()); // {"x":0,"y":0,"w":100,"width":100,"h":100,"height":100,"x2":100,"y2":100,"cx":50,"cy":50}
console.log(rect.remember('oldBBox')); // {"x":0,"y":0,"w":100,"width":100,"h":100,"height":100,"x2":100,"y2":100,"cx":50,"cy":50}

// 设置多个数据
rect.remember({
  oldFill:    rect.attr('fill')
, oldStroke:  rect.attr('stroke')
})

forget()：删除通过remember方法保存在元素上的数据

删除通过remember方法保存在元素上的数据

// 删除单个数据
rect.forget('oldBBox')
// 删除指定的多个数据
rect.forget('oldFill', 'oldStroke')
// 删除所有数据
rect.forget()

Document Tree

add()：向元素里添加子节点

添加子节点

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

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

addTo()：将元素添加进一个元素里

向子元素添加进父元素里

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

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

clone()：克隆元素

克隆一个元素

var clone = rect.clone()

put()：添加子元素，并返回子元素

向调用者添加一个子元素，并返回子元素

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

putIn()：添加子元素，并返回父元素

向调用者添加进父元素中，并返回父元素

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

remove()：移除元素

从svg文档中移除调用元素:

rect.remove()

replace()：替换元素

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

rect.replace(draw.circle(100))

toParent(): 移动元素到不同的父元素

将一个元素移动到不同的父元素(类似于addTo)，但不改变其视觉表示。所有转换都被合并并应用于元素。

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

ungroup()：将组的元素放到组的父级里

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

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()：递归平坦容器

递归地分解所有容器并使整个结构平坦，因此没有容器元素存活。这对于导出以减少嵌套组或类似的数量非常有用。

顺序操作

after()：在元素后插入一个元素

在调用者之后插入一个元素

rect.after(circle)

before()：在元素前插入一个元素

在调用者之前插入一个元素

rect.before(circle)

insertAfter()：将当前元素插入到传入元素后面

将当前元素插入到传入元素后面

rect.insertAfter(circle)

insertBefore()：将当前元素插入到传入元素前面

将当前元素插入到传入元素前面

rect.insertBefore(circle)

back()：移动元素到最后

移动元素到最后

rect.back()

backward()：移动元素向后一步

移动元素向后一步

rect.backward()

front()：移动元素到最前

移动元素到最前

rect.front()

forward()：移动元素向前一步

移动元素向前一步

rect.forward()

next()：获取调用者元素的下一个元素

获取调用者元素的下一个元素，最后一个元素返回undefined

rect.next()

position()：获取元素的位置

获取rect在其兄弟姐妹之间的位置(一个数字):

rect.position()

previous()：获取调用者元素的上一个元素

获取调用者元素的上一个元素，第一个元素返回undefined

rect.previous()

siblings()：获取所有兄弟对象，包含自己

获取元素的所有兄弟对象，包括元素本身:

rect.siblings()

Geometry

point()：将一个点从屏幕坐标转换为元素坐标系统。

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

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

inside()：检测给定的点是否在元素范围内

要检查给定的点是否在元素的包围框内，可以使用inside()方法:

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

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

bbox()：获取元素盒子信息

获取元素盒子信息

element.bbox()

rbox()

返回元素的转换后的方框，即元素周围转换后最紧的方框。要指定盒子转换到哪个坐标系统，可以相对地传入一个元素:

element.rbox(drawing)

viewbox()：设置 / 获取元素的viewbox属性

设置 / 获取元素的viewbox属性

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

drawing.viewbox()

动画

animate()：元素的动画方法

使用animate()给元素添加动画，animate()方法将接受三个参数。第一个是持续时间，第二个是延迟，第三个是以下情况:

// 让rect元素的左上角移动到（150，105）位置，有动画效果
rect.animate().move(150, 150)

// 让rect元素在2000毫秒之内颜色从默认到#f03，延迟1000毫秒
rect.animate(2000, 1000, 'now').attr({ fill: '#f03' })

// 串联多个动画，先过渡颜色在过渡位置
rect.animate().attr({ fill: '#f03' }).animate().dmove(50,50)

// 在串联多个动画时，执行下一个动画之前可以添加一个延迟时间
rect.animate().attr({ fill: '#f03' }).delay(200).animate().dmove(50,50)

// 更多的参数:
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)

SVG.Timeline

finish()：

该方法完成整个时间轴。所有值都被设置为相应的结束值，每个动画都被填充

rect.animate().move(200, 200).animate().dmove(50,50).size(300,400)
rect.timeline().finish() // rect at 250,250 with size 300,400

pause()：动画暂停方法

暂停动画

rect.animate().move(200, 200)
rect.mouseover(function() { this.timeline().pause() })

play()：动画播放

播放动画

rect.animate().move(200, 200)
rect.mouseover(function() { this.timeline().pause() })
rect.mouseout(function() { this.timeline().play() })

reverse()：动画倒放

倒着播放时间轴，基本上是回到过去:

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

// 正放
rect.timeline().reverse(true)

// 倒放
rect.timeline().reverse(false)

stop()：停止动画，并将时间轴清零

动画回到开始状态

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

speed()：改变动画时间轴的速度

改变动画时间速度

rect.animate().move(200, 200)
// 动画速度提升2倍 / 时间缩短一半
rect.timeline().speed(2)

time()：设置动画时间

修改动画时间

rect.animate().move(200, 200)
// 修改动画是时间为100毫秒
rect.timeline().time(100)

基本事件

element.click()：元素的点击事件

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

// 元素添加点击事件
element.click(function() {
  this.fill({ color: '#f06' })
})

// 元素移除点击事件
element.click(null)

可添加的事件有: click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, touchstart, touchmove, touchleave, touchend and touchcancel…

element.fire()：触发事件:

触发事件:

element.fire(event)

// 带参数出发
element.fire(event, { arbitrary: data })

element.dispatch()：触发事件

也在元素上触发一个事件，与fire()类似，但返回该事件。然后你可以在事件上检查例如defaultprevent
```
var event = element.dispatch(event)
if (event.defaultPrevented)
  doNothing()
```

element.on()：监听事件

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

// 单一事件监听
element.on('click', click)

// 多事件监听
element.on(['click', 'mouseover'], handler)
// or
element.on('click mouseover', handler)

// 绑定事件监听函数里的上下文
element.on('click', click, window)

element.off()：解除事件

// 解除单个事件的每个监听函数
element.off('click', click)
// 解除单个事件的所有监听函数
element.off('click')

// 解除多个事件
element.off(['click', 'mouseover'])
element.off('click mouseover')

// 解除所有事件
element.off()