SVGPath - 强大的SVG路径解析库

一、SVGPath简介

SVG（Scalable Vector Graphics）是一种基于XML的矢量图形格式，是W3C制定的标准。SVGPath是一个强大的路径解析库，它可以将SVG路径指令解析成可用的数据结构，也可以将数据结构转换成SVG路径字符串。 该库支持所有SVG路径指令及其变体，例如：M，L，H，V，C，S，Q，T，A以及Z指令。同时还支持相对命令和绝对命令，也支持简写形式和完整形式。

二、SVGPath使用

1、安装SVGPath库

可以使用npm进行安装，命令如下：

npm install svgpath

2、使用SVGPath库

在你的应用程序中导入SVGPath:

const { SVGPathData, SVGPathTransformer, makeAbsolute } = require('svgpath');

3、解析SVG路径指令

使用SVGPathTransformer.transform方法可以将SVG路径指令解析成可用的SVGPathData对象，SVGPathData对象是SVGPathTransformer解析的结果，可以用于生成SVG路径字符串：

const transformer = new SVGPathTransformer('M 100 100 L 300 100 L 200 300 z');
const pathData = transformer.transform();
console.log(pathData);

输出结果为：

SVGPathData {
  getCommands: [Function: getCommands],
  commands: [
    MoveToAbsCommand {command: "M", x: 100, y: 100},
    LineToAbsCommand {command: "L", x: 300, y: 100},
    LineToAbsCommand {command: "L", x: 200, y: 300},
    ClosePathCommand {command: "z"}
  ],
  fromArray: [Function: fromArray],
  toArray: [Function: toArray],
  toAbs: [Function: toAbs],
  toRel: [Function: toRel],
  toString: [Function: toString],
  toSVGString: [Function: toSVGString],
  iter: [Function: iter],
  bbox: [Function: bbox]
}

SVGPathData.commands是一个SVGPathCommand数组，可以通过getCommands方法获取。SVGPathCommand对象表示SVG路径指令。每个SVGPathCommand对象都有command属性和一些特定的属性，例如MoveToAbsCommand对象有x和y属性。可以使用toArray和toString方法将SVGPathCommand数组转换为SVG路径字符串。

4、SVGPath操作

1、SVGPathData对象的转换

使用makeAbsolute方法可以将SVGPathData对象中的相对命令转换为绝对命令：

const absolutePathData = makeAbsolute(pathData);
console.log(absolutePathData.toString());

输出结果为：

M 100 100 L 300 100 L 200 300 Z

2、SVGPathCommand对象的操作

可以使用SVGPathCommand对象的toAbs方法和toRel方法将命令转换为绝对命令和相对命令：

const mover = new MoveToAbsCommand(100, 100);
const moverAbs = mover.toAbs();
console.log(moverAbs.toString()); // M 100 100

const moverRel = moverAbs.toRel();
console.log(moverRel.toString()); // m 100 100

3、SVGPathCommand数组的操作

可以使用SVGPathData.toArray方法和fromArray方法将SVGPathCommand数组转换为普通数组和SVGPathData对象：

const commands = pathData.toArray();
console.log(commands); // ['M', 100, 100, 'L', 300, 100, 'L', 200, 300, 'Z']

const newData = SVGPathData.fromArray(commands);
console.log(newData.toSVGString()); // M 100 100 L 300 100 L 200 300 Z

三、SVGPath扩展应用

1、SVGPathEditor

可以将SVGPath与SVGPathEditor结合使用，实现在线编辑SVG路径指令的功能。SVGPathEditor是一个基于SVG和SVGPath的编辑器库，通过SVGPathEditor可以在网页中直接编辑SVG路径，并实时生成SVG路径指令。

示例代码：

  
  
  
  <script src="https://cdn.jsdelivr.net/npm/svgpath"></script>
  <script src="https://unpkg.com/svgpatheditor/dist/index.js"></script>
  


  
  

  <script>
    const editor = SVGPathEditor(document.querySelector('#editor'));

    editor
      .on('pathdata', (pathData) => {
        console.log(pathData.toSVGString());
      })
      .pathData('M 100 100 L 300 100 L 200 300 z')
  </script>