简介
lengthy-svg 是一个基于 Node.js 的 NPM 包，可以用来方便地生成长宽比较大的 SVG 图片。它提供了一系列简单易用的 API，可以帮助前端开发者快速生成符合需求的 SVG 图形。
安装
使用 npm 可以轻松地安装 lengthy-svg。
npm install lengthy-svg
使用方式
使用 lengthy-svg 生成 SVG 图形非常简单，只需要通过调用 lengthy-svg 提供的 API 可以灵活地配置和定制 SVG 图形。这里先介绍 package.json 的引入方式：
{
"dependencies": {
"lengthy-svg": "^1.0.0"
}
}
在项目中使用该依赖文件，可根据需要自行配置 SVG 图形。
创建整个 SVG DOM
我们可以使用 createSvg 来创建一个新的 SVG 元素。参数是 SVG 元素的属性，例如 width，height，viewBox。
const lengthySvg = require('lengthy-svg');
const svg = lengthySvg.createSvg({ width: 500, height: 500, viewBox: '0 0 50 50' });接下来，我们可以继续往 SVG 中添加元素。
添加矩形
我们可以使用 createRect 来创建矩形。参数是矩形元素的属性，例如 x，y，width，height。你可以根据需求自行配置其它属性
const rect = lengthySvg.createRect({ x: 10, y: 10, width: 40, height: 40 });
svg.appendChild(rect);添加路径
我们可以使用 createPath 来创建路径。参数是路径元素的属性。你可以根据需求自行配置其它属性。
const path = lengthySvg.createPath({ d: 'M 10 10 L 20 30 Z' });
svg.appendChild(path);添加文本
我们可以使用 createText 来创建文本。参数是文本元素的属性，例如 x，y，fill。你可以根据需求自行配置其它属性。
const text = lengthySvg.createText({ x: 20, y: 15, fill: 'red' });
text.textContent = 'Hello lengthy-svg!';
svg.appendChild(text);将 SVG 输出
最后我们可以使用 serialize 方法将 SVG 输出到字符串中。
const xmlString = lengthySvg.serialize(svg); console.log(xmlString);
示例代码
-- -------------------- ---- ------- ----- ---------- - ----------------------- ----- --- - ---------------------- ------ ---- ------- ---- -------- -- - -- --- --- ----- ---- - ----------------------- -- --- -- --- ------ --- ------- -- --- ---------------------- ----- ---- - ----------------------- -- -- -- -- - -- -- -- --- ---------------------- ----- ---- - ----------------------- -- --- -- --- ----- ----- --- ---------------- - ------ -------------- ---------------------- ----- --------- - -------------------------- -----------------------
以上代码会在控制台输出 SVG 图形的字符串表示。
总结
本文介绍了如何使用 Node.js 的 NPM 包 lengthy-svg 生成 SVG 图形。使用 lengthy-svg 可以轻松高效地生成符合需求的长宽比较大的 SVG 图形。希望本文对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600574d681e8991b448ea2ae