GetBBox

From Svg wiki

Contents 1 Description 2 Type 3 Parameters 4 Methods 5 Return Value 6 Related Methods and Objects 7 Examples 8 Implementation Support 9 Firefox Support 10 Links

Description

The method getBBox() finds the rendered position and geometry of the target element, and returns the tightest fitting rectangle aligned with the axes of the applicable element's user coordinate system that entirely encloses the applicable element and its descendants.

The bounding box is computed exclusive of any values for clipping, masking, filter effects, opacity, stroke-width, or overflow visibility.

For curved shapes, the bounding box encloses all portions of the shape, not just end points.

For text elements, for the purposes of the bounding box calculation, each glyph is treated as a separate graphics element. The calculations assume that all glyphs occupy the full glyph cell. For example, for horizontal text, the calculations assume that each glyph extends vertically to the full ascent and descent values for the font.

Type

Method

Parameters

none

Methods

None

Return Value

• type: SVGRect
• description: The SVGRect is the exact position and dimensions of the target shape. It has the following properties:

x: the horizontal origin (the left-most point) of the rectangle
y: the vertical origin (the top-most point) of the rectangle
width: the horizontal extent of the rectangle, from the origin in a positive (right-ward) direction
height: the vertical extent of the rectangle, from the origin in a positive (bottom-moving) direction

Each of these properties is available as an object property of the return value.

Related Methods and Objects

Examples

This will create a rectangle around object as SVGRect object:

function DrawBorder( targetElement )
{
   var bbox = targetElement.getBBox();
   var svgns = 'http://www.w3.org/2000/svg';

   var outline = SVGDocument.createElementNS(svgns, 'rect');
   outline.setAttributeNS( null, 'x', bbox.x - 2 );
   outline.setAttributeNS( null, 'y', bbox.y - 2 );
   outline.setAttributeNS( null, 'width',  bbox.width + 4 );
   outline.setAttributeNS( null, 'height', bbox.height + 4 );
   outline.setAttributeNS( null, 'stroke', 'blue' );
   outline.setAttributeNS( null, 'fill', 'yellow' );

   targetElement.parentNode.insertBefore( outline, targetElement );
}

Implementation Support

Firefox Support

getBBox() in Firefox is a little quirky. See SVG in Firefox for details. There are two major issues: (1) the onload issue: getBBox() will not work when used in the onload event; (2) the orphan issue: getBBox() will not work for SVG elements that are not attached to the SVG tree, e.g. new nodes created with the createElementNS that haven't been appended as a child to a node on the DOM tree.

Furthermore, getBBox will not even be an available function for newly created elements unless object is one of the SVG object types. To be sure the SVG element is properly typed, use the namespaced version of the javascript function, createElementNS, with the correct namespace http://www.w3.org/2000/svg.

document.createElementNS("http://www.w3.org/2000/svg",'circle');

Below are workarounds for the two issues stated above. Please check the http://www.mozilla.org and SVG in Firefox for updates on the status of these issues.

To avoid the onload issue, use window.setTimeout(). This example uses an arbitrary time-out of 100ms. The time-out duration may or may not be relevant to the onload issue.

<svg xmlns="http://www.w3.org/2000/svg" ... onload="loadsvgcaller(evt)">    

function loadsvgcaller(evt) {
 window.setTimeout("loadsvg(evt);",100);
}

function loadsvg(evt) {
 //your onload function
}

The orphan issue is avoided by appending the orphan to the tree before calling getBBox, and removing it again afterwards. This is embodied by the following function, getSafeBBox.

   Node.prototype.getSafeBBox = function () {
       var bbox = null;
       var parent;
       var hasparent;
       
       if ( this.parentNode ) {
           parent = this.parentNode;
           hasparent = true;
       }
       else {
           parent = null;
           hasparent = false;
       }
       
       document.documentElement.appendChild(this);	//put the child in the custody of the state
   
       if (this.getBBox) {
           bbox = this.getBBox();
       }
       
       if (hasparent) {
           parent.appendChild(this);		//give the child back
       }
       else  {
           document.documentElement.removeChild(this);		//put the orphan back on the street
       }
       
       return bbox;
   }

The above solution does not work in internet explorer/Adobe viewer. A static version of the function can be created with minor changes.

   function getSafeBBox(node) {
       //change all instances of 'this' to 'node'
   }

user:paulgazz 2007-01-27

Links

http://the.fuchsia-design.com/2006/12/getting-svg-elementss-full-bounding-box.html