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