如何让 SVG.JS 3.0.+ 与 svgdom 和 node.js 一起工作答案

【问题标题】：How to get SVG.JS 3.0.+ working with svgdom and node.js如何让 SVG.JS 3.0.+ 与 svgdom 和 node.js 一起工作
【发布时间】：2019-01-09 08:18:16
【问题描述】：

SVG.js 3.0.5 已经发布，我想更新我的 nodejs 应用程序，它使用从 2.7 到 3.0.5 的库生成 svg。

要使用 node.js 运行这个库，你需要使用 svgdom (https://github.com/svgdotjs/svgdom)

这里的问题是构造函数发生了变化，我无法弄清楚如何将它与 node.js 一起使用。

//previous method to initialize svgjs 2.7
const svgWindow   = require('svgdom');
const SVGJS = require("svg.js")(svgWindow);

//with version 3.0.5 the package name changed
const svgWindow = require("svgdom");
const SVGJS = require("@svgdotjs/svg.js");

SVGJS(svgWindow); //is not a function error

【问题讨论】：

标签： node.js svg.js

【解决方案1】：

我浏览了源代码，看起来应该可以工作

const window = require("svgdom");
const SVG = require("@svgdotjs/svg.js");

SVG.registerWindow(window, window.document);

【讨论】：

我看到registerWindow is not a function 错误。似乎 svg.js 提供的 TypeScript 定义也不包含这个。
@SergeiBasharov 你的 svg.js 版本是什么？它现在包含在官方文档中（参见github.com/svgdotjs/svgdom#get-started-with-svgjs-v30）

【解决方案2】：

我更新了自述文件，以便更好地反映新用途：

npm install @svgdotjs/svg.js svgdom

// returns a window with a document and an svg root node
const window = require('../svgdom')
const document = window.document
const {SVG, registerWindow} = require('@svgdotjs/svg.js')

// register window and document
registerWindow(window , window.document)

// create canvas
const canvas = SVG(document.documentElement)

// use svg.js as normal
canvas.rect(100,100).fill('yellow').move(50,50)

// get your svg as string
console.log(canvas.svg())
// or
console.log(canvas.node.outerHTML)

请注意，svg.js v3 不再导出这个大对象。相反，您必须要求您需要的功能。自述文件中的更多信息：https://github.com/svgdotjs/svgdom

【讨论】：