在前端开发中，我们经常需要对 SVG 图形进行尺寸计算，矩形包围框计算是其中一个常见的操作。而 svg-path-bounding-box 是一个 npm 包，它提供了一个方便的方法来计算任何 SVG 路径的包围框。
安装
首先，我们需要在本地安装 svg-path-bounding-box，可以使用 npm 或 yarn 命令行工具完成：
--- ------- --------------------- ------
或者
---- --- ---------------------
使用
引入
我们可以通过 ES6 的 import 语法来引入 svg-path-bounding-box：
------ - -- -------------- ---- ------------------------
也可以使用 CommonJS 的 require 语句引入：
----- -------------- - ---------------------------------
方法
svg-path-bounding-box 提供了一个方法 compute，用于计算任何 SVG 路径的包围框。方法有两个参数：
d：SVG 路径的 d 属性值；options：一个可选的选项对象，用于控制计算方法。
------------------------- ---------
其中，d 是必选参数，表示 SVG 路径的 d 属性值（注意，需要是字符串形式），options 是可选参数，表示包围框计算的选项。
选项
normalize: 设置像素的尺寸。默认值为1，设置为0.5时，返回的包围框的值将减半。angle: 设置 SVG 图形中的角度，默认为0，表示的是弧度制的值，需要将角度转换为弧度制。center:用于控制计算方法是否基于闭合路径的中心点来计算包围框。默认为true，当设置为false时，将基于路径的左上角同端点和曲线段的最大和最小值来计算包围框。simplify: 用于控制计算方法是否简化路径。默认为false，当设置为true时，svg-path-bounding-box 将使用简单贝塞尔曲线（quadratic 或 cubic）作为一部分，而不是贝塞尔曲线的组合。
示例
下面是一个示例，展示了如何通过 svg-path-bounding-box 计算任何 SVG 路径的包围框：
------ - -- -------------- ---- ------------------------ ----- ------- - ---- -- - -- - -- - -- - -- -- --- ----- ------- - - ---------- -- ------ -- ------- ----- --------- ----- -- ----- ---- - ------------------------------- --------- ------------------
输出结果为：
-
-- ---
-- ---
------ ---
------- ---
--- ---
--- ---
----- ---
----- ---
----- ---
----- ---
---- -
----- ---
----- ---
----- ---
----- --
-
-svgPath 是一个 SVG 路径，options 是一个可选参数，用于控制 x 和 y 的尺寸为 1。我们将它作为参数传递给了 compute 函数，返回了一个包括当前路径的边界框的对象。对象属性的含义如下：
x 和 y：返回包围框的左上角的 x 和 y 坐标。
width 和 height：返回包围框的宽度和高度。
cx 和 cy：返回其中心的 x 和 y 坐标。
minX、minY、maxX 和 maxY：返回包含路径最左、最下、最右、最上点对应的 x 和 y 坐标。
dot：返回一个以当前边框的四个极端点为中心的包含该点的矩形的一部分。
总结
svg-path-bounding-box 提供了一个简单且易用的方法，用于计算任何 SVG 路径的包围框，使得对 SVG 图形进行尺寸计算变得更加轻松。它是一个值得注意的 npm 包，非常适合前端开发中需要对 SVG 进行处理的场景。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/5eedd5fcbb4e78292a6fb864