在前端开发中，经常需要操作 SVG 路径，如获取路径上的点、长度、斜率等信息。而 svg-path-properties 就是一个方便获取 SVG 路径相关信息的 npm 包。本文将介绍该包的使用方法及示例代码。
1. 安装
使用 npm 命令进行安装：
npm install svg-path-properties
2. 示例
2.1 获取路径长度
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- ----- ---- - -- - - - -- -- - --- --- ----- ---------- - ------------------------ ----- ----------- - ---------------------------- ----------------- ------- -----------------
代码解释：首先导入 svg-path-properties 模块，然后定义一个 SVG 路径，接下来使用 svgPathProperties 方法获取路径相关属性，再使用 getTotalLength() 方法获取路径长度，最后将路径长度打印到控制台上。
输出结果：
Path length: 141.42135620117188
2.2 获取路径上的点坐标
-- -------------------- ---- ------- ----- ----------------- - ------------------------------- ----- ---- - -- - - - -- -- - --- --- ----- ---------- - ------------------------ ----- ------ - --- --- ---- - - -- - - --- ---- - ----- ----- - ----------------------------- - ----------- - --- ------------------------------------- - ----------------- ------- ----------------------
代码解释：导入 svg-path-properties 模块，定义一个 SVG 路径，使用 svgPathProperties 方法获取路径相关属性。然后循环遍历路径长度的 1/9、2/9、...、9/9 处的点，使用 getPointAtLength() 方法获取点的坐标。最后将点的坐标打印到控制台上。
输出结果：
Path points: 0,0;16.666665543556213,16.666666507720947;33.33333108711243,33.333333015441895;50,50;66.66666412353516,33.333335876464844;83.33332824707031,16.666667938232422;100,0;``` ## 3. 总结 `svg-path-properties` 提供了方便的 API 来获取 SVG 路径相关的信息，如路径长度、点坐标等等。本文介绍了该插件的安装方法、示例代码，并对每段代码进行了解释，希望读者能够掌握该插件的使用并灵活运用在实际项目中。 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/5eedd61cbb4e78292a6fb8bb) ，转载请注明来源 [https://www.javascriptcn.com/post/5eedd61cbb4e78292a6fb8bb](https://www.javascriptcn.com/post/5eedd61cbb4e78292a6fb8bb)