Skip to content

Instantly share code, notes, and snippets.

@jarek-foksa
Last active April 26, 2020 09:59
Show Gist options
  • Save jarek-foksa/2648095 to your computer and use it in GitHub Desktop.
Save jarek-foksa/2648095 to your computer and use it in GitHub Desktop.
SVGElement.prototype.innerHTML shim
// 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
});
@nuxodin
Copy link

nuxodin commented Apr 9, 2015

In Safari, svg elements have no "children" attribute, i use "childNodes" instead

@munir131
Copy link

In get function _ref.length is decrease after every iteration of for loop.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment