outerHtml returns undefined for SVG elements in IE

Question

Here is my code

<svg id="a" height="210" width="400">
  <path id="b" d="M150 0 L75 200 L225 200 Z" />
</svg>

i have trigger mouse move event on b

   $("#b").hover(function() {
        alert($(this)[0].outerHTML);
    });

this was working in chrome but not working in IE how can i solve this..

please find the JSFiddle link : http://jsfiddle.net/r8v70Lnk/

alert box will show only in chrome but not in IE..

Possibly related http://stackoverflow.com/questions/12592417/outerhtml-of-an-svg-element — Miguel Mota, Apr 27 '15 at 05:45
the exact path can be log (console) in chrome but same sample in IE it can be logged as undefined — Akbar Basha, Apr 27 '15 at 05:51
@Filype is right, btw: $(this)[0].outerHTML === this.outerHTML — Maurice Perry, Apr 27 '15 at 05:52
try to use this alert($(this).outerHTML); Remember ID's are unique so you dont need the "[0]" — Michael Unterthurner, Apr 27 '15 at 07:24

score 9 · Answer 1 · answered Jul 06 '17 at 08:47

9

Dont know if it is a solution for you but i usually do it like:

new XMLSerializer().serializeToString(document.querySelector('#b'))

If you want to parse the string again and insert the node in your document:

new DOMParser().parseFromString(svgString, "image/svg+xml")

answered Jul 06 '17 at 08:47

Philipp Wrann

Evergreen browsers work with the outerHTML spec for SVGs, just not IE and company. This solution works great though. Thanks! – Modular Oct 04 '17 at 16:06

1 Answers1