# getBBox()?

**URL:** <https://talk.observablehq.com/t/getbbox/1222>\
**Category:** Uncategorized\
**Created:** [September 17, 2018, 3:28pm UTC](https://talk.observablehq.com/t/getbbox/1222 "2018-09-17T15:28:28Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [September 17, 2018, 3:28pm UTC](https://talk.observablehq.com/t/getbbox/1222/1 "2018-09-17T15:28:28Z")

</div>

How can I best get hold of svg.node().getBBox()? It returns SVGRect {x: 0, y: 0, width: 0, height: 0}.

---

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [September 17, 2018, 3:31pm UTC](https://talk.observablehq.com/t/getbbox/1222/2 "2018-09-17T15:31:35Z")

</div>

would this help? just bboxing 🙂

[http://svgjs.com/geometry/](http://svgjs.com/geometry/)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 17, 2018, 4:08pm UTC](https://talk.observablehq.com/t/getbbox/1222/3 "2018-09-17T16:08:09Z")

</div>

This issue is typically because you are calling _element_.getBBox before adding the element to the DOM; the browser can’t compute the bounding box of a detached element because it doesn’t know where it lives in the DOM and what styles will affect it.

The occurs commonly in Observable because the standard pattern is to implement cells as “pure” functions where you create detached elements and return them, and then they are inserted into the DOM; so within a cell, you should nearly always be working with detached elements. But you can workaround this issue by temporarily inserting the element into the body. For example:

```auto
{
  const svg = html`<svg style="border:solid 1px red;">
    <g name="content">
      <text>${DOM.text(text)}</text>
    </g>
  </svg>`;

  // Add the SVG element to the DOM so we can determine its size.
  document.body.appendChild(svg);

  // Computing the bounding box of the content.
  const box = svg.querySelector("[name=content]").getBBox();

  // Remove the SVG element from the DOM.
  svg.remove();

  // Set the viewBox.
  svg.setAttribute("width", box.width);
  svg.setAttribute("height", box.height);
  svg.setAttribute("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`);

  return svg;
}

```

Live example:

> **[Autosize SVG](https://beta.observablehq.com/@mbostock/autosize-svg)**
>
> An Observable notebook by Mike Bostock.

I use this technique to size the D3 radial tidy tree:

> **[D3 Radial Tidy Tree](https://beta.observablehq.com/@mbostock/d3-radial-tidy-tree)**
>
> An Observable notebook by Mike Bostock.

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [September 18, 2018, 7:03am UTC](https://talk.observablehq.com/t/getbbox/1222/4 "2018-09-18T07:03:05Z")

</div>

Thanks Mike! Will use that to auto-scale my [X- Matrix](https://beta.observablehq.com/@martien/x-matrix).

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [September 18, 2018, 7:05am UTC](https://talk.observablehq.com/t/getbbox/1222/5 "2018-09-18T07:05:40Z")

</div>

Thanks [RandomFractals](https://talk.observablehq.com/u/RandomFractals). But importing another library make the notebook heavier and creates yet another dependency. So I’d rather opt for something inline, like Mike’s suggestion below.

---

<div class="post-metadata">

**Author:** ![RandomFractals](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/randomfractals/32/759_2.png) [@RandomFractals](https://talk.observablehq.com/u/RandomFractals)\
**Post date:** [September 18, 2018, 12:25pm UTC](https://talk.observablehq.com/t/getbbox/1222/6 "2018-09-18T12:25:59Z")

</div>

my comment was mainly a suggestion you also explore other svg js libs

---

<div class="post-metadata">

**Author:** ![Martien](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/martien/32/470_2.png) [@Martien](https://talk.observablehq.com/u/Martien)\
**Post date:** [September 20, 2018, 8:56am UTC](https://talk.observablehq.com/t/getbbox/1222/7 "2018-09-20T08:56:25Z")

</div>

I see. Thanks. I’ve added [svgjs.com](http://svgjs.com) to my exploration list.

---

<div class="post-metadata">

**Author:** ![msb](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@msb](https://talk.observablehq.com/u/msb)\
**Post date:** [January 3, 2020, 8:28pm UTC](https://talk.observablehq.com/t/getbbox/1222/8 "2020-01-03T20:28:11Z")

</div>

It would be awesome to put patterns like this in the docs somewhere - maybe an “advanced HTML” notebook? I tried a bunch of hacks to solve a similar problem before finding this thread by chance. Although it’s only a workaround, it lets you use a lot of existing JS/HTML in an Observable way.

---

<div class="post-metadata">

**Author:** ![RLesser](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/rlesser/32/1715_2.png) [@RLesser](https://talk.observablehq.com/u/RLesser)\
**Post date:** [March 15, 2021, 12:02am UTC](https://talk.observablehq.com/t/getbbox/1222/9 "2021-03-15T00:02:37Z")

</div>

As a future reference, I’ve built a function to get the BBox of a d3 selection, and set it as the dimensions of a rectangle, in this notebook:

> **[Automatic getBBox](https://observablehq.com/@rlesser/automatic-getbbox)**
>
> I don't like that an svg element has to be rendered in the page before you can get the bounding box from getBBox(). I understand why it is the case, but I still don't like it. This is my attempt to make a function that bypasses that issue....

Any suggestions or comments welcome

---

<div class="post-metadata">

**Author:** ![dlaliberte](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/dlaliberte/32/3506_2.png) [@dlaliberte](https://talk.observablehq.com/u/dlaliberte)\
**Post date:** [December 12, 2022, 12:06am UTC](https://talk.observablehq.com/t/getbbox/1222/10 "2022-12-12T00:06:45Z")

</div>

I’d like to use the convenience of SVGjs as well. The library is at [https://svgjs.dev/](https://svgjs.dev/), however.

I was able to import and draw a [simple example using SVGjs](https://observablehq.com/@dlaliberte/svgjs-experiment), but getting the animation to work required refreshing the page after saving, for some reason.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [December 12, 2022, 10:08am UTC](https://talk.observablehq.com/t/getbbox/1222/11 "2022-12-12T10:08:41Z")

</div>

@dlaliberte Would you mind creating a new topic for your issue? Thank you!