Search code examples
javascriptinternet-explorersvganychartcss-to-pdf

IE (or possibly Javascript library) Adding SVG namespace twice

I modified this and am moving this comment to the top.

In keeping with Stackoverflow, this could be a bug in some underlying things that no one can fix. But I will consider the best method you propose keeping within the framework of our application to remove the spurious attribute as the solution. It would be unfair otherwise.

I have an oddity I am trying to solve which is baffling. First, it's unclear that it is IE except this behavior does not happen on Chrome or Firefox. We are using charting libraries from Anychart and D3 to generate SVGs on a page. All of this is great. The application is a printing application and extracts the resolved css + html into a separate div and sends this via REST to a formatting service.

The issue lies only in IE and only with the Anychart chart. If you examine this page:

http://www.xportability.com/XEPOnline/FOTestSuite.html

And look toward Image Example #4, you will see a chart. Using IE and DOM explorer, you will see this:

Explorer DOM

All looks fine. In fact all is fine if that was "real". If you use javascript to extract that SVG in anyway (simplest method is copy HTML in Explorer DOM), you will see that this element's HTML is actually:

 <svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" xmlns="http://www.w3.org/2000/svg">

Even using document.getElementById("anychart").outerHTML in console returns this element this way.

Note the double declaration of the namespace. Well, that is the issue as that is an error.

  • It does not happen on the D3 chart, nor the static chart. only this chart.
  • It does not happen in Chrome nor Firefox.
  • And most odd, it does not even display this way in IE's own DOM explorer.

Am I missing something here? Is there something else we are doing that is making IE do this?

NOTE: I am not looking for answers like apply the regex against the serialized string or such. We can do that (in fact we already do) to close empty (non-closed) HTML tags to make valid XML.

NOTE2: I am not discounting the fact that this could exists in the underlying Anychart JS library used or be a bug in Internet Explorer. It does only appear using Anychart library. They have been contacted to comment. However, the fact that IE shows only one namespace in the DOM explorer and then two when exporting is suspect that it is an IE issue potentially. They have also been contacted through their support.

So, I understand there may be no "answer" to this question .. it could be a bug in another library or in a browser.

As such, this demo only works in Chrome and Firefox for the moment ... until we hack around this or solve in some other way.

Solution

  • After deep analysis Anychart Javascript library was the culprit. They fixed the bug and this does not happen anymore.