Skip to content

Instantly share code, notes, and snippets.

Last active April 26, 2020 09:59
  • Star 7 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
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];
return $temp.innerHTML;
set: function(markup) {
var $div, $element, $svg, _i, _len, _ref, _results;
while (this.firstChild) {
markup = "<svg id='wrapper' xmlns=''>" + 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];
return _results;
enumerable: false,
configurable: true
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