获取SVG中路径的维度 [英] Get dimension of a path in SVG

问题描述

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

I need to get the dimension on the screen of a <path> in a SVG from JavaScript.

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

I do not have any "transformation" or "scaling" (transform, scale) on my SVG. The only thing changed is the viewBox, which will change the size of all the elements in the SVG.

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

I have been using myPath.getBBox(), the width returned stays the same even though I change my viewBox.

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

So I'm wondering what is the relation with this viewBox and size of a path. Maybe there is a function to compute the width?

推荐答案

你可以调用 getBoundingClientRect（）获取维度的路径上的方法。它将返回 ClientRect 对象：

You can call getBoundingClientRect() method on your path to get dimensions. It will return a ClientRect object:

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

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

There is also a getScreenCTM() method, which returns the transformation matrix in the current screen pixels of the element it was called on. the spec says:

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

[getScreenCTM()] Returns the transformation matrix from current user units (i.e., after application of the ‘transform’ attribute, if any) to the parent user agent's notice of a "pixel". [...] Note that null is returned if this element is not hooked into the document tree.

这篇关于获取SVG中路径的维度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！