javascript - dynamic svg in html5 -
i expected svg nodes first class citizen in html5 unexpected behavior (under firefox 55.0.2 , chrome 54.0.2840.71).
in following html file, expect big circle dynamically added newly created svg element. instead :
- the inspector tells me dom correctly modified
- nothing displayed
- when copy paste dom (copy -> outer html, script deleted) in new file, resulting static html file fine.
what miss ? why have discrepancy between dom , rendered version of ? how can correct ? re-draw ?
when use ns suffixed versions of functions (ie. createelementns , setattributens) similar results , nothing rendered.
here culprit:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>bug dynamic svg</title> <script type="text/javascript"> element.prototype.grow = function (tag, attribute_map) { var child = document.createelement(tag); if ( attribute_map !== undefined ) { (let key in attribute_map) { child.setattribute(key, attribute_map[key]); } } this.appendchild(child); return child; }; </script> </head> <body> <div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> <script> var g_svg = document.getelementbyid("sandbox").firstelementchild; g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); </script> </html>
and here dom-copy-pasted result via inspector (script removed manually) :
<html><head> <meta charset="utf-8"> <title>bug dynamic svg</title> </head> <body> <div id="sandbox"><svg viewbox="0 0 200 200"><circle cx="100" cy="100" r="32"></circle></svg></div> </body></html>
elements go in svg namespace, attributes don't.
<!doctype html> <html> <head> <meta charset="utf-8"> <title>bug dynamic svg</title> <script type="text/javascript"> element.prototype.grow = function (tag, attribute_map) { var child = document.createelementns('http://www.w3.org/2000/svg', tag); if ( attribute_map !== undefined ) { (let key in attribute_map) { child.setattribute(key, attribute_map[key]); } } this.appendchild(child); return child; }; </script> </head> <body> <div id="sandbox"><svg viewbox="0 0 200 200"></svg></div> <script> var g_svg = document.getelementbyid("sandbox").firstelementchild; g_svg.grow('circle', {'cx':"100", 'cy':"100", 'r':"32"}); </script> </html>
wiki
Comments
Post a Comment