SVG.js

SVG.Box

All SVG.*Boxinstances inherit from SVG.Box.

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)

transform()

returns SVG.Box

Transforms the box with given a matrix:

var transformedBox = box.transform(matrix)


SVG.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

constructor on SVG.Element
returns SVG.ViewBox which inherits from SVG.Box

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 })


SVG.BBox

Stands for Bounding Box.

bbox()

constructor on SVG.Element
returns SVG.BBox which inherits from SVG.Box

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)


SVG.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()

constructor on SVG.Element
returns SVG.RBox which inherits from SVG.Box

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

path.rbox()

Usually, what is needed is the box relative to the drawing. To get this, pass the SVG.Container of the drawing.

path.rbox(draw)

This will return an instance of SVG.RBox containing the following values relative either to the screen or the SVG.Container parameter:

  • 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.

addOffset()

returns itself

Adds the offset by the current window scroll position because the native getBoundingClientRect changes when window is scrolled.

box.addOffset()
Fork me on GitHub