Search code examples
svginternet-explorer-11

InnerSVG is empty for SVG element in IE11

I try to get property innerSVG value and catch undefined. enter image description here

Do not see please to console content, i've used jQuery('#main_svg')[0].innerSVG

Solution

  • There is no innerSVG property in any standard. According to DOM Parsing and Serialization spec Element.innerHTML should work also for SVG or other XML content.

    In 2009, a library innnerSVG was published to

    provide the innerHTML property on all SVGElements

    Which apparently, at that time, did not work in all browsers. It contains its own implementation of a XML serializer. The numerous TODO comments in the source code seem to indicate it is a fairly incomplete.

    Since Internet Explorer 9, it is no longer really needed, as there is support for XMLSerializer. While IE 11 seems to have a bug and does not return content for innerHTML, this will work:

    function getInnerHTML (el) {
   if (el.innerHTML === undefined) {
       var XMLS = new XMLSerializer();
       var nodes = [];
       for (var i = 0; i < el.childNodes.length; i++) {
         nodes.push(XMLS.serializeToString(el.childNodes[i]));
       }
       return nodes.join('');
   } else {
       return el.innerHTML;
   }
}