获取 SVG 中路径的尺寸答案

【问题标题】：Get dimension of a path in SVG获取 SVG 中路径的尺寸
【发布时间】：2011-10-25 08:01:03
【问题描述】：

我需要从 JavaScript 获取 SVG 中的屏幕尺寸。

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

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

所以我想知道这个 viewBox 和路径的大小有什么关系。也许有一个计算宽度的函数？

【问题讨论】：

【解决方案1】：

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

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

还有一个getScreenCTM() 方法，它返回调用它的元素当前屏幕像素中的变换矩阵。规范says:

[getScreenCTM()] 返回当前用户单元的转换矩阵（即，在应用‘transform’属性后，如果有的话）到父用户代理的“像素”通知。 [...] 请注意，如果此元素未连接到文档树，则返回 null。

【讨论】：

【解决方案2】：

首先，请记住path 不能有宽度。它是一组坐标。浏览器使用该信息以及绘图方法来连接坐标并创建可见的形状。

其次，边界框是 SVG 渲染时间的快照。这就是为什么你在调整大小时没有得到更新的宽度。

我想一种解决方法是将容器元素的宽度设置为 SVG（div 或其他）。

也许一些libraries 可能会提供一些实用方法来解决这个问题。

【讨论】：