Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

outerHTML of an SVG element

Tags:

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?

like image 670
ivkremer Avatar asked Sep 25 '12 23:09

ivkremer


People also ask

What is element outerHTML?

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.

What does outerHTML return?

The outerHTML property sets or returns the HTML element, including attributes, start tag, and end tag.

Is there an outerHTML?

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.

What is the difference between innerHTML and outerHTML?

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.


1 Answers

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

like image 190
Sanket Sahu Avatar answered Oct 02 '22 14:10

Sanket Sahu