Scalable Vector Graphics (SVG): getBBox () does not work in Internet Explorer 10

Question

I get the width of the frame using the code:

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

This will return me the width of the bounding box with the id entered. This works great in all browsers (Chrome, firefox21, IE7), but not in IE10. In IE10, it returns me a value of 0.

This is an example that I created in jsfiddle. Please check this out. http://jsfiddle.net/L82rn/

I am wondering if there are compatibility issues between IE10 method and svg getBBox, please let me know if there are any problems.

Answer 1

As stated in the spec in this thread , I think it’s

Note that getBBox must return the actual bounding box during the method call, even if the item has not yet been processed.

"Even if the item has not yet been processed," seems to be an anchor point to IE, this problem persists a year after IE11. The only other possibility that I can see from experience is that with g tags that do not have explicit widths and heights according to the IE specification, it is possible to just completely exclude this check, since in “have no width”, apparently the same as 0 for IE codebase.

So, a workaround would be to look for the biggest child as you go. In your specific case, as a workaround, you can just grab lastChild when you add it to the g tag. Change the JS code in the script to this (I also fixed the svgns thing, as Thomas W mentioned 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, only the last line I changed moved to lastChild to getBBox() should warn 8 instead of 0 now like in Firefox and other browsers.