javascript - 获取 SVG 中路径的尺寸

Question

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

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

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

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

score 53 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

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

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

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

2 回答 2