Menu
I am trying to get the position of SVG elements using Javascript. I have managed to get the position on elements that have X/Y attribute set. But elements, such as paths does not have this attribute.. At least not in my docuements.
Is there a way to calculate the position other than taking the first number in the "path"?
Thank you, Morten
936
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.
It can draw anything! I've heard that under the hood all the other drawing elements ultimately use path anyway. The path element takes a single attribute to describe what it draws: the d attribute.
SVG Path - <path> The <path> element is used to define a path. The following commands are available for path data: M = moveto. L = lineto.
You can use the function getBBox() to get the bounding box for the path. This will give you the position and size of the tightest rectangle that could contain the rendered path.
An advantage of using this method over reading the x and y values is that it will work with all graphical objects. There are more objects than paths that do not have x and y, for example circles that have cx and cy instead.
Link: getBBox() in the SVG v1.1 standard.
129
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
