SVGElement.prototype.innerHTML shim

gistfile1.js

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

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

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