Re: getBBox that takes into account clipping?
- Hi Robert,
> You could get the bounding box of the clip path and then just work out thehttp://stackoverflow.com/questions/10430518/getting-a-display-bounding-box-for-a\
> intersection of the two rectangles. See the answer here for more details
Thanks - that's a good trick for getting the bbox of the clip-path area.
I'll use that.
I realised I was actually after something a bit more general - an
equivalent of getBBox() that takes into account clip-paths and svg bounding
boxes of all the children.
I ended up implementing it as:
// Get the bounding box, taking into account svg bounding windows
var cloneEl = el.cloneNode(true);
cloneEl = replaceClipPaths(cloneEl);
// Do that trick of appending to the tree, so Firefox's getBBox doesn't
var bbox = cloneEl.getBBox();
// Replace any clip-paths in this element and its children with equivalent
if (el.nodeType != 1)
// Handle children first
for (var i = 0; i < el.children.length; i++)
var testEl = el.children[i];
var newChild = replaceClipPaths(testEl);
if (newChild != testEl)
// Replace child
// Replace any clipping node and its children with a single rectangle
// TODO: currently does only svg bounding box clip-paths.
// TODO: currently creates a rect around the clip-path, regardless of
what's in the
// visible area. This suits my use-case, but if you want the actual
bbox, you'll have
// to further trim this rect according to what's inside it.
if (el.nodeName == "svg" && el.width != null && el.height != null)
var replacementEl = document.createElementNS(svgns, "rect");
As you can see, it needs a little more work to be completely general
(including implementing your suggestion).
It's a pretty expensive solution - it clones the entire tree - but it's the
only way I could see of doing it properly. I considered iterating through
the tree and summing the bboxes of the child nodes, but I'm pretty sure
that won't work - you have to take into account the transforms on each
node, and that means the bboxes could be rotated, which means they don't
work as bboxes (as David D. mentions).
I'll post the result if I ever get around to implementing the TODO bits
Thanks for your help!
[Non-text portions of this message have been removed]