SVG (Scalable Vector Graphics) 是一种标准化的矢量图像格式，它可以实现无损缩放，支持各种动画效果，是前端开发中经常使用的图像格式。而 npm 包 svg-polygon-points 则是一个用于创建 SVG 多边形的工具，它可以帮助开发者快速生成符合规范的多边形代码，本文将介绍其使用方法。
安装
在使用 svg-polygon-points 之前，需要先进行安装，可以使用 npm 命令行进行安装：
npm install svg-polygon-points --save
使用方法
在安装后，即可引入并使用 svg-polygon-points。
首先，需要引入 svg-polygon-points：
const polygonPoints = require('svg-polygon-points');接下来，可以使用 polygonPoints 方法来生成多边形的点坐标，该方法可以传入一个包含点坐标的数组，如：
const points = [
{ x: 50, y: 10 },
{ x: 100, y: 50 },
{ x: 50, y: 90 },
{ x: 0, y: 50 }
];
const polygon = polygonPoints(points);在这个例子中，我们传入了一个包含四个点的数组，然后通过 polygonPoints 方法生成了多边形的点坐标。
生成的多边形的点坐标是一个字符串，可以直接用于创建 SVG 多边形元素，如：
const svgElement = `<svg height="100" width="100">
<polyline points="${polygon}" style="fill:none;stroke:black;stroke-width:3" />
</svg>`;在这个例子中，我们使用了 ES6 的模板字符串来创建了一个 SVG 元素，其中 polyline 元素表示多边形，points 属性接收了生成的多边形的点坐标，其余的属性用于设置样式。
生成的多边形点坐标如下：
50,10 100,50 50,90 0,50
示例
下面我们来看一个完整的示例，创建一个正方形的多边形：
-- -------------------- ---- ------- ----- ------------- - ------------------------------ ----- ---- - ---- ----- ------ - - - -- -- -- - -- - -- ----- -- - -- - -- ----- -- ---- -- - -- -- -- ---- - -- ----- ------- - ---------------------- ----- ---------- - ----- ---------------- ---------------- --------- ------------------- --------------------------------------------- -- -------- ------------------------
运行后，可以在控制台看到生成的 SVG 元素。
总结
svg-polygon-points 是一款非常实用的 npm 包，可以帮助开发者快速生成符合规范的多边形点坐标，减少代码编写的工作量，提高开发效率。在实际开发中，可以根据需要自由组合，生成不同类型的多边形。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ea181e8991b448e76a9