Get innerHTML of svg-tag result in undefined in IE

Question

I'm having some trouble getting the html content of a svg-tag, with javascript in Internet Explorer.

My javascript code is as follow:

console.log($('.icon')[0].innerHTML);

and my tag in my html document:

<svg class="icon"><use>testing</use></svg>

This works well in Chrome, Firefox and what have we, but in Internet Explorer I'm left with an undefined error. Is it my mixture of Javascript and jQuery?

How come I can't seem to fetch the content of my svg-tag? I've tried some different things and often I end up with an "SCRIPT5007: Unable to set property 'innerHTML' of undefined or null reference"

Help me :) thanks in regards!

Answer 1

How about using XMLSerializer. Get yourself the element somehow and then do this...

console.log(new XMLSerializer().serializeToString(element));

Answer 2

Internet Explorer doesn't currently support the innerHTML method on SVG Elements. We do however have an issue opened internally to track our consideration of this feature. In the meantime I would explore alternative solutions like the InnerSVG polyfill which allegedly works in Internet Explorer 9 and newer.