Last active
April 26, 2020 09:59
-
-
Save jarek-foksa/2648095 to your computer and use it in GitHub Desktop.
SVGElement.prototype.innerHTML shim
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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 | |
}); |
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
In Safari, svg elements have no "children" attribute, i use "childNodes" instead