Why can not we get outerHTML of an svg element with element.outerHTML
property?
Is this way is the best http://jsfiddle.net/33g8g/ for getting svg source code?
outerHTML. The outerHTML attribute of the Element DOM interface gets the serialized HTML fragment describing the element including its descendants. It can also be set to replace the element with nodes parsed from the given string.
The outerHTML property sets or returns the HTML element, including attributes, start tag, and end tag.
The outerHTML is the HTML of an element including the element itself. Contrast this with the innerHTML of the element, which is the HTML contained within an elements opening and closing tags. By definition, elements without both opening and closing tags do not have innerHTML.
The outerHTML is the HTML of an element including the element itself. Use the outerHTML when you want to completely replace an element and its contents. Use innerHTML when you only want to replace the contents of the element.
SVGElements don't have outerHTML property.
You can define like this in pure Javascript
Object.defineProperty(SVGElement.prototype, 'outerHTML', { get: function () { var $node, $temp; $temp = document.createElement('div'); $node = this.cloneNode(true); $temp.appendChild($node); return $temp.innerHTML; }, enumerable: false, configurable: true });
Or a one line jQuery solution would be
$('<div>').append($(svgElement).clone()).html();
Reference: https://gist.github.com/jarek-foksa/2648095
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With