Scalable Vector Graphics(SVG): getBBox() not working in internet explorer 10

Question

I am getting the width of a bounding box by using the code:

document.getElementById("dataId").getBBox().width;

This will return me the width of the bounding box with the entered id. This is working fine in all browsers(Chrome,firefox21, IE7) but not in IE10. In IE10, it is returning me the value of 0.

This is the example I created in jsfiddle. Kindly check it. http://jsfiddle.net/L82rn/

I am curious if there any compatibility issues between IE10 and svg getBBox method, please do let me know if there is any issue on this.

You have an error in your fiddle, you didn't define `svgns`. With that error fixed, I can unfortunately only confirm that my installation of IE10 does not seem to report a proper bounding box for ``s containing ``. However, asking for the bounding box of the text element itself seems to work as expected. Maybe this could offer you a workaround? — Thomas W, Jun 03 '13 at 07:11
Actually I have running applications using .getBBox on IE9+ and all calculations seem to work fine. — roundrobin, Jul 24 '13 at 15:21

score 3 · Accepted Answer · edited May 23 '17 at 11:51

As quoted from the spec in this thread I think it's this

Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered.

The "even in the case the element has not yet been rendered" seems to be the sticking point for IE, this problem persists a year later now on IE11. The only other possibility that I can see out of experience is that with g tags not having an explicit width and height according to the spec IE might just be foregoing this check completely, as in "to not have a width" is presumably the same as 0 for the IE codebase.

So the workaround would be to look for the biggest child as you go. In your particular case as a workaround you can just grab the lastChild when you add it to the g tag. Change the JS code in the fiddle to this (I fixed the svgns thing too as mentioned by Thomas W in the comments).

var temp;
temp = document.createElementNS("http://www.w3.org/2000/svg","text");
temp.appendChild(document.createTextNode(".."));
temp.setAttribute("x",38); 
temp.setAttribute("y",18);
document.getElementById("tata").appendChild(temp);
alert(document.getElementById("tata").lastChild.getBBox().width);

As you can see it's just the last line I've changed shoving in lastChild before getBBox(), should alert an 8 instead of a 0 now as Firefox and your other browsers did.

Scalable Vector Graphics(SVG): getBBox() not working in internet explorer 10

1 Answers1