internet-explorersvghighchartsxml-namespaces

Highcharts adds duplicate xmlns attribute to SVG element in IE


I'm using Highcharts to create charts in a PHP web application. Problem is that in IE, the SVG element that is created ends up with duplicate xmlns attributes. It can be seen in the F12 developer tools, HTML tab:

enter image description here (click for larger version)

While the chart displays just fine in the browser, it causes a problem when trying to convert it to an image file with Batik, which complains about the duplicate attribute.

I've reproduced this in both IE 9 and 10, and also with the demo charts at highcharts.com (which is where the above screenshot was taken). It doesn't happen with Firefox, though.

How do I prevent the duplicate attribute? Or alternatively, what's the best way to remove it (PHP or jQuery)? I've tried running the HTML containing the SVG through Tidy, but that ends up converting elements like clipPath to lowercase, which causes problems of its own.


Solution

  • We fixed the bug now, see the the linked code at https://github.com/highslide-software/highcharts.com/issues/1978. While the element was created with createElementNS, only IE9 and IE10 actually created a visible attribute for it. So the workaround was to add the attribute as well if not present.