public
Last active

SVGElement.prototype.innerHTML shim

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
// Important: You must serve your pages as XHTML for this shim to work,
// otherwise namespaced attributes and elements will get messed up.
Object.defineProperty(SVGElement.prototype, 'innerHTML', {
get: function() {
var $child, $node, $temp, _i, _len, _ref;
$temp = document.createElement('div');
$node = this.cloneNode(true);
_ref = $node.children;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
$child = _ref[_i];
$temp.appendChild($child);
}
return $temp.innerHTML;
},
set: function(markup) {
var $div, $element, $svg, _i, _len, _ref, _results;
while (this.firstChild) {
this.firstChild.parentNode.removeChild(this.firstChild);
}
markup = "<svg id='wrapper' xmlns='http://www.w3.org/2000/svg'>" + markup + "</svg>";
$div = document.createElement('div');
$div.innerHTML = markup;
$svg = $div.querySelector('svg#wrapper');
_ref = $svg.children;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
$element = _ref[_i];
_results.push(this.appendChild($element));
}
return _results;
},
enumerable: false,
configurable: true
});

At line 14, do you mean the following?

this.firstChild.parentNode.removeChild(this.firstChild);

Yeah, I have updated the code. There was also another bug that caused the shim to behave like outerHTML.

Modified for outerHTML:

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
});

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.