这篇博客介绍了如何使用SVG.js库在HTML文档中创建和操作SVG元素。首先，需要在HTML文件中引入svg.js脚本。然后，通过SVG()函数创建SVG文档，并使用addTo方法将其附加到页面上，指定大小。等待DOM加载完成后，可以进一步添加和操作SVG元素，如绘制矩形。此外，SVG.js也可用于纯SVG文档中。博客还提供了基本的代码示例，帮助读者快速上手。
快速开始
快速开始（Getting started）
准备（Preparation）
Create a basic Html markup and include the svg.js script:
创建一个基本的 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>
Or just import svg.js in your javascript application:
或者只是在您的 javascript 应用程序中导入 svg.js：
import { SVG } from '@svgdotjs/svg.js'
Note: All properties that were former available on the global SVG object need to be imported now
笔记：现在需要导入以前在全局 SVG 对象上可用的所有属性
创建一个 SVG 对象（Create an SVG document）
Next, use the SVG() function to create an SVG document and add it to the html page:
接下来，使用 SVG() 函数创建一个 SVG 文档并将其添加到 html 页面：
var draw = SVG().addTo('body').size(300, 300)
var rect = draw.rect(100, 100).attr({ fill: '#f06' })
You can pass any css selector to addTo or simply a node.
您可以将任何 css 选择器传递给 addTo 方法或只是一个节点。
<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>
SVG.js does not set a size for the document automatically. So make sure to call size() with appropriate values.
SVG.js 不会自动为文档设置大小。因此，请确保使用适当的值调用 size()。
E.g. to set the size to the dimensions of its parent use this:
例如：要将大小设置为其父级的尺寸，请使用：
var draw = SVG().addTo('#someId').size('100%', '100%')
等待 DOM 加载完成（Wait for DOM to be loaded）
This might seem obvious to many but it’s still worth mentioning. If you include your js files in the head of your document, make sure to wait for the DOM to be loaded:
这对许多人来说似乎很明显，但仍然值得一提。如果您将 js 文件包含在文档的头部，请确保等待 DOM 加载：
SVG.on(document, 'DOMContentLoaded', function() {
var draw = SVG().addTo('body')
})
This is not an issue if you include your js at the bottom.
如果您在底部包含您的 js，这不是问题。
Pure SVG
SVG.js also works outside of the HTML DOM, inside an SVG document for example:
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>
The SVG() function
This function does not only create new documents, it can also retrieve svg.js objects from the dom or create new ones from an svg fragment:
此函数不仅可以创建新文档，还可以从 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)
Playground
Just to get you going, here is a basic setup. Everything is present to start fiddling.
只是为了让您继续前进，这是一个基本设置。一切都从这里开始。
// initialize SVG.js
var draw = SVG().addTo('body')
// draw pink square
draw.rect(100, 100).move(100, 50).fill('#f06')\
扫一扫
845
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
