当前位置: 首页 > 工具软件 > SVG.js > 使用案例 >

svg.js粗略中文版

汪德寿
2023-12-01

用于操纵和动画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')
})
 类似资料: