在前端开发中，处理 SVG 图形时经常需要对 SVG path 进行一些操作，例如判断一个 path 是否是一个合法的 SVG path，这时候我们可以使用一个很好用的 npm 包 - is-svg-path。
is-svg-path 是什么？
is-svg-path 是一个检查是否是 SVG path 的简单工具包。它可以判断传入的 path 是否符合下面的准则：
- 路径必须始终以 moveto 命令 M 或 m 或一个 Z 或 z 命令结束。
- 不允许 a 命令标记 arc 经过180度。
- 所有相对命令的第一个参数都必须是非负值。
- 向量命令中不能有超过三个参数。
- 向量命令中不能有重复的参数。
- 如果一条路径只有一个 moveto，则可以省略路径中的 lineto 命令。
如何使用？
我们可以使用 npm 包管理器来安装 is-svg-path，安装命令如下：
--- ------- -----------
安装成功后，我们就可以在项目中使用 is-svg-path 进行 SVG path 判断了。
----- --------- - ----------------------- ----- ---- - -- - - - -- -- - --- - - -- --- --- ----------------------------- -- ----
is-svg-path 的使用非常简单，只需要传入待判断的 path 即可，返回一个 Boolean 类型的值。
成功的判断例子
我们可以通过一个例子来了解 is-svg-path 在成功判断的情况下的用法。
----- --------- - ----------------------- ----- ----- - ---- -- - -- - -- - -- - -- -- --- ----- ------------ - ----------------- -------------------------- -- ---- ----- ----- - -------------------------- ----- ------------ - ----------------- -------------------------- -- ----
path1 是一个标准的 SVG path，path2 是一个带圆弧的 SVG path，我们都可以使用 isSvgPath 方法成功地将它们判断为 SVG path。
失败的判断例子
我们可以通过一个例子来了解 is-svg-path 在失败判断的情况下的用法。
----- --------- - ----------------------- ----- ---- - -------- ------ ----- ----------- - ---------------- ------------------------- -- -----
path 是一个无效的路径，此刻我们的 isSvgPath 方法能够正确地将其判断为非 SVG path。
总结
本文介绍了 npm 包 is-svg-path 的使用方法，以及其用于判断是否是 SVG path 的准则。使用 is-svg-path 为开发者提供了一种方便快捷的方式来检查 SVG path，希望本文能够对前端工程师们有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedaf60b5cbfe1ea0610ff8