Get dimension of a path in SVG

Question

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

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.

I have been using myPath.getBBox(), the width returned stays the same even though I change my 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?

Answer 1

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; 

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()] 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.