在SVG中获取路径的维度

Get dimension of a path in SVG

本文关键字：路径 获取 SVG      更新时间：2023-09-26

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

我的SVG上没有任何"转换"或"缩放"(转换，缩放)。唯一改变的是viewBox，它将改变SVG中所有元素的大小。

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

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

您可以在您的路径上调用getBoundingClientRect()方法来获取维度。它将返回一个ClientRect对象:

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

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

[getScreenCTM()]返回当前用户单位的转换矩阵(即，在应用' transform '属性之后，如果有的话)到父用户代理的"像素"通知。[…注意，如果该元素没有被挂接到文档树中，则返回null。

首先，请记住path不能有宽度。它是一组弦。浏览器使用这些信息和绘图方法来连接这些线并创建一个可见的形状。

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

一个变通办法，我想将容器元素的宽度到SVG (div或其他东西)。

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

相关文章：