Get dimension of a path in SVG

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.

First off all, keep in mind that path cannot have a width. Its a set of coords. The browser uses that info along with the drawing method to connect the coords and create a visible shape.

Secondly, the bounding box is a snapshot of when the SVG was rendered. That is why you don't get the updated width on resize.

A workaround I guess would be to get the width of the conatiner element to the SVG (div or something else).

Maybe some of the libraries may provide some utility method to figure this out.