svg.js粗略中文版
用于操纵和动画SVG的轻量级库。
SVG.js没有依赖关系，其目标是尽可能小，同时提供接近完整的SVG规范覆盖范围。如果您还不确定，这里有几点重点。
SVG.js很快。显然不如普通js快，但比竞争对手快很多倍：
- 关于大小，位置，变换，颜色，...的动画
- 模块化结构，轻松扩展
- 各种有用的插件可用
- 形状类型之间具有移动，大小，中心 ...
- 将事件绑定到元素
- 完全支持不透明蒙版和剪切路径
- 文本路径，甚至动画
- 元素组
- 动态渐变和图案
- 充分记录（您正在查看:)
源码准备
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')
})