Boxes

Getting a bounding box of an element is often influenced by context. SVG.js offers various methods to get a bounding box of an element.

All SVG.*Boxinstances have one method in common: merge().

merge()

returns itself

All SVG.*Box prototypes have a nifty little feature. With merge(), two SVG.*Box instances can be merged into one new instance, basically being the bounding box of the two original boxes. For example:

var box1 = draw.rect(100,100).move(50,50).bbox()
var box2 = draw.rect(100,100).move(200,200).bbox()
var box3 = box1.merge(box2)


ViewBox

The viewBox specifies a rectangle in user space which should be mapped to the bounds of the viewport established by the given element, taking into account attribute preserveAspectRatio.

viewbox() as getter

returns SVG.ViewBox

Without any arguments an instance of SVG.ViewBox will be returned:

var box = draw.viewbox()

But the best thing about the viewbox() method is that you can get the zoom of the viewbox:

var box = draw.viewbox()
var zoom = box.zoom

If the size of the viewbox equals the size of the svg drawing, the zoom value will be 1.

viewbox() as setter

returns itself

The viewBox attribute of an <svg> element can be managed with the viewbox() method. When supplied with four arguments it will act as a setter:

draw.viewbox(0, 0, 297, 210)

Alternatively you can also supply an object as the first argument:

draw.viewbox({ x: 0, y: 0, width: 297, height: 210 })


BBox

Stands for Bounding Box.

bbox()

returns SVG.BBox

Get the bounding box of an element. This is a wrapper for the native getBBox() method but adds more values:

path.bbox()

This will return an instance of SVG.BBox containing the following values:

  • width (value from native getBBox)
  • height (value from native getBBox)
  • w (shorthand for width)
  • h (shorthand for height)
  • x (value from native getBBox)
  • y (value from native getBBox)
  • cx (center x of the bounding box)
  • cy (center y of the bounding box)
  • x2 (lower right x of the bounding box)
  • y2 (lower right y of the bounding box)


RBox

Stands for Rect Box. It wraps the native getBoundingClientRect() method. It's different from the BBox because it calculates the bounding box around the visual representation of the element, including all transformations.

rbox()

returns SVG.RBox

Is similar to bbox() but will give you the box around the exact visual representation of the element, taking all transformations into account.

path.rbox()

This will return an instance of SVG.RBox containing the following values:

  • width (the actual visual width)
  • height (the actual visual height)
  • w (shorthand for width)
  • h (shorthand for height)
  • x (the actual visual position on the x-axis)
  • y (the actual visual position on the y-axis)
  • cx (center x of the bounding box)
  • cy (center y of the bounding box)
  • x2 (lower right x of the bounding box)
  • y2 (lower right y of the bounding box)

Important: Mozilla browsers include stroke widths where other browsers do not. Therefore the resulting box might be different in Mozilla browsers. It is very hard to modify this behaviour so for the time being this is an inconvenience we have to live with.

Fork me on GitHub