Get bounding box of SVG path

Question

I want exactly what this page do

http://codepen.io/netsi1964/full/vNoemp/

I have the path and need to know it's bounding box as a rect element, it's x,y,width and height given code

<path d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >

and know the rect properties

score 16 · Accepted Answer · answered Oct 29 '16 at 04:42

16

With pure JavaScript: give your path an ID and get its bounding box using getBBox().

var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);

Here is a demo:

var myPathBox = document.getElementById("myPath").getBBox();
console.log(myPathBox);

<svg width="400" height="400">
 <path id="myPath" d="M147.5 55.8c-5.8-7.2-13.6-14.4-25.5-14.4-8.4 0-15.4 8.2-27 8.2-9 0-13-7.8-23-7.8C51.4 41.8 31 60.4 31 84.5c0 12.8 4.2 32.5 13.6 49.7C51 146.7 59.4 155 69 155c6.7 0 14.7-6.3 24.2-6.3 8.4 0 16.2 5.6 23.8 5.6 18 0 35-23.5 35-39.3 0-.8-.3-1.4-.3-2v-1c-11.8-6.3-18.2-15.7-18.2-29.3 0-11 4.8-20.5 13.6-26.7l.5-.2zm-53-8.8c13.7-4.2 26.3-14.4 26.3-32 0-1.5-.2-3.3-.4-5.3l-.2-.8C106.4 12.6 94 23.4 94 40.3c0 1.6.2 3.6.6 5.8v.8z" style="translate(0px,-212.47488403320312px) scale(1,1)" >
 </svg>

answered Oct 29 '16 at 04:42

Gerardo Furtado

100,839
9
121
171

@Gerado can I get x1,y1 and x2,y2 , not x,y,width,heigh? – rafat mansour Oct 31 '16 at 02:18
@rafatmansour x2 is simply `x1 + width`, and y2 is `y1 + height`. Also, have a look at `getBoundingClientRect()`: https://developer.mozilla.org/en/docs/Web/API/Element/getBoundingClientRect – Gerardo Furtado Oct 31 '16 at 02:41
@Gerado but that if I assume that it will draw horizontal with no rotations ,but I need exactly x2,y2 which specified the end point – rafat mansour Oct 31 '16 at 21:35
1

@rafatmansour both functions already compute the `transform`, if any. – Gerardo Furtado Nov 01 '16 at 00:41

score -6 · Answer 2 · answered Aug 01 '19 at 13:31

-6

I know this is an old issue, but thought I would put this variant to Furtado's answer for reference here.

An easy way to get the bounding box for the path.

Make sure the path (or any other SVG element has an id on it.
Open the svg file in Chrome (or FF or probably IE).
Inspect the image
Open the console in the inspection tool.
Enter the JS: document.getElementById("myPath").getBBox(); (where myPath is the id)

The bounding box info will be displayed in the console.

Same method, just no need for custom code.

answered Aug 01 '19 at 13:31

CG Monroe

97
2

1

What do you mean by custom code? How is that different from Gerardo's answer? – ftl Aug 02 '19 at 16:59
1

As I said It's not different just a variant of it. His answer shows JavaScript code embedded with the svg image. This does not work if the svg is used as an img tag as is most common. So you have to create a custom page with this in it. My version just lets you use the browser tools and a bit of js to find the same info. Ergo, no custom code. – CG Monroe Aug 02 '19 at 17:20

Get bounding box of SVG path

2 Answers2

Linked