获取SVG路径的尺寸

Question

我需要从JavaScript中获取SVG中<path>元素在屏幕上的尺寸。

我的SVG上没有任何“变换”或“缩放”（transform，scale）。唯一改变的是viewBox，这将改变SVG中所有元素的大小。

我一直在使用myPath.getBBox()，返回的宽度即使我更改了viewBox也保持不变。

因此，我想知道这个viewBox和路径大小之间的关系。也许有一个计算宽度的函数？

- jsgoupil

---

我认为你需要稍微精确一些：你想要“边界框尺寸”，对吗？而且你想要这些尺寸以SVG坐标还是屏幕坐标的形式呈现？ - Phrogz

Answer 1

您可以在路径上调用getBoundingClientRect()方法以获取尺寸。 它将返回一个ClientRect对象：

var w = myPath.getBoundingClientRect().width;
var h = myPath.getBoundingClientRect().height;

此外还有一个getScreenCTM()方法，它将返回调用该方法的元素在当前屏幕像素中的变换矩阵。

该规范说明:

[getScreenCTM()] 返回从当前用户单位（即应用了“transform”属性后）到父级用户代理的“像素”之间的变换矩阵[...]注意，如果此元素未连接到文档树，则返回null。

- Spadar Shut

Answer 2

首先要记住，`path` 不能有宽度。它是一组坐标。浏览器使用这些信息和绘图方法连接这些坐标并创建可见形状。

其次，边界框是 SVG 渲染时的快照。这就是为什么在调整大小时不会获得更新的宽度。

我想一个解决方法可能是获取容器元素到 SVG 的宽度（`div` 或其他元素）。

也许一些库可以提供一些实用方法来解决这个问题。

- Mrchief