背景
利用 SVG 技术，我们可以轻松地创建出矢量图形。而在创建 SVG 图形的过程中，对路径图形的操作是常常需要的。而 npm 包 svg-pathdata，正是针对 SVG 图形中路径图形的操作而推出的一个优秀的 npm 包。本文将会带领大家详细了解 svg-pathdata 的使用教程，包括它的深度及学习以及指导意义，并给出一些实用案例代码。
简介
svg-pathdata 是由 npm company 开源的一个 npm 包，它提供了对 SVG 图形中路径数据的解析和处理能力。svg-pathdata 支持将 SVG 路径数据解析为 JSON 数据，也支持将 JSON 数据转换为 SVG 路径数据。此外，svg-pathdata 还具有对 SVG 路径数据进行计算、优化及拆分合并等等操作的功能。
安装
使用 npm，可以轻松地安装 svg-pathdata，具体命令如下：
$ npm install svg-pathdata
常用 API
parse
parse 方法是用于将 SVG 路径数据解析为 JSON 数据的方法。具体命令如下：
let pathdata = require('svg-pathdata');
let path = 'M10 10L20 20';
let segments = pathdata.parse(path);
console.log(segments); // [{"type":"M","relative":false,"x":10,"y":10},{"type":"L","relative":false,"x":20,"y":20}]stringify
stringify 方法是用于将 JSON 数据转换为 SVG 路径数据的方法。具体命令如下：
let pathdata = require('svg-pathdata');
let segments = [{"type":"M","relative":false,"x":10,"y":10},{"type":"L","relative":false,"x":20,"y":20}];
let path = pathdata.stringify(segments);
console.log(path); // "M 10 10 L 20 20"translate
translate 方法用于将路径中的点坐标向指定方向移动指定的距离。具体命令如下：
let pathdata = require('svg-pathdata');
let path = 'M10 10L20 20';
let segments = pathdata.parse(path);
pathdata.translate(segments, 10, 10);
let newPath = pathdata.stringify(segments);
console.log(newPath); // "M 20 20 L 30 30"scale
scale 方法用于将路径中的点坐标沿指定轴向放大或缩小指定倍数。具体命令如下：
let pathdata = require('svg-pathdata');
let path = 'M10 10L20 20';
let segments = pathdata.parse(path);
pathdata.scale(segments, 2, 2);
let newPath = pathdata.stringify(segments);
console.log(newPath); // "M 20 20 L 40 40"rotate
rotate 方法用于将路径绕指定中心点旋转指定角度。具体命令如下：
let pathdata = require('svg-pathdata');
let path = 'M10 10L20 20';
let segments = pathdata.parse(path);
pathdata.rotate(segments, 90, {x:0, y:0});
let newPath = pathdata.stringify(segments);
console.log(newPath); // "M -10 10 L -20 20"optimize
optimize 方法用于将多个操作后的路径段进行合并。具体命令如下：
let pathdata = require('svg-pathdata');
let path = 'M10 10L20 20L30 30';
let segments = pathdata.parse(path);
pathdata.optimize(segments);
let newPath = pathdata.stringify(segments);
console.log(newPath); // "M 10 10 L 30 30"示例
给路径线段添加 tooltip 事件
-- -------------------- ---- ------- --- ------- - ------------------------------------ --- -------- - -------------------------- -------- - ------------------------- --- ----------- - ------------------------- --- ---------- - ------------------------------ ------------------------- - ----------- ----------------------- - ----- --------------------------- - ------- ---------------------- - ------- ------------------------ - ------ --------------------------- - -------- ------------------------- - ------- ------------------------ - ------ ------------------------ - ------- -------------------------------------- ------------------------------------- --------------- - --- ----- - --------------------------------------- --------------- --------------------- - -------- - --- - ----- -------------------- - -------- - --- - ----- -------------------- - ----------------------- ----------------------- ------------------------ - -------- --- -------------------------------------- ---------- - ------------------------ - ------- ---
给路径线段添加 hover 样式
-- -------------------- ---- -------
--- ------- - ------------------------------------
--- ------------ - --------------------------
-------------------------------------- ---------- -
------------------------- --- ----
------------------------ -- -
------------------------- ------------------------- - -----------------------------
---
---
-------------------------------------- ---------- -
------------------------- --------------
---结语
本文详细地介绍了 npm 包 svg-pathdata 的使用方法，让读者能够掌握该 npm 包的使用并能够在前端开发中灵活应用。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64093