javascript - This inline svg won't display -

I am using js to convert SVG into images with inline SVG

  loadInlineSvg: function (className) {var svgImgs = [] .slice.call (document.getElementsByClassName (className)); SvgImgs.forEach (function (img) {var svg = document.createElement ('svg'), src = img.getAttribute ('src'), request = new XMLHttpRequest (); req.addEventListener ('readystatechange', function (evt ) {If (req.readyState === 4) {if (req.status === 200} {svgXML = req.responseXML.getElementsByTagName ('svg') [0]; for (jar j = 0; j & LT; svgXML.children.length; J ++) {svg.appendChild (svgXML.children [J]);} (for verb = 0; I & lt; svgXML.attributes.length; i ++) {svg .setAttribute (svgXML.attributes [i] .name, svgXML.attributes [i] .Value);} svg.setAttribute ('width', img.getAttribute ('width')); svg.setAttribute ('height', img .getAttribute ('height')); Img.parentNode.replaceChild (SVG, IMG);}}}); Req.open ('post', src, true); req.send ();}); }  

The resulting XML response is expected from the AJAX request:

  & lt; Svg xmlns = "http://www.w3.org/000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink" width = "100" height = "100" view box = "0 145 145" version = "1.1" & gt; & Lt; G id = "compass" filled = "#fffff"> gt; & Lt; Path d = "M77.804878,14.0915556 L77.804878,10.6666667 L82.2256098,2.86666888 C82.2256098,2.81288889 79.9896037,0.0244444444 72.7572866,0.0244444444 C65.5245274,0.0244444444 63.6585366,2.81288889 63.6585366,2.81288889 L636585366, 10.6666667 L68.0792683,10.6666667 L68.0792683,14.008 C30.0609756,16.2248889 0.0477439024,47.9373333 0.0477439024,86.7386667 C0.0477439024,126.977333 32.5843293,159.597333 72.6083079,159.597333 C112.632287,159.597333 144.894345,126.977333 144.894345,86.7386667 C144.894345, 48.3822222 115.381098 , 16.9488889 77.804878,14.0915556 L77.804878,14.0915556 Z M72.6984909,151.152889 C37.313628,151.152889 8.62794207,122.313778 8.62794207,86.7386667 C8.62794207,51.1635556 37.313628,22.3244444 72.6984909,22.3244444 C108.083796,22.3244444 136.769482,51.1635556 136.7, 6, 9, 482, 86.7386667 C136.769482,122.313778 108.083796,151.152889 72.6984909,151.152889 L72.6984909,151.152889 Z "id =" Fill -1 "& gt; & Lt; / Path & gt; & Lt; Path d = "M70.3745122,82.2062222 C67.9983689,89.48844446,0133689,89.4884444 C70.6375457,91.8773333 73.8805945,92.4897778 76.2567378,90.8564444 C78.6328811,89.2235556 79.2420579,85.9631111 77.617439,83,5746667 C75.9932622, 81.1857778 72.7502134, 80.5733333 70.3745122,82.2062222 "ID =" Fill-2 "& gt; & Lt; / Path & gt; & Lt; Path d = "M115.190122,44.0191111 C103.840335,32.6084444 88.7497256,26.3244444 72.6984909,26.3244444 C56.6476982,26.3244444 41.5570884,32.6084444 30.2073018,44.0191111 C18.8570732,55.4297778 12.6066006,70.6013333 12.6066006,86.7386667 C12.6066006,102.875556 18.85 , 70,732, 118.047111 30.2073018,129.457778 C41.5570884,140.868889 56.6476982,147.152889 72.6984909,147.152889 C88.7497256,147.152889 103.840335,140.868889 115.190122,129.457778 C126.539909,118.047111 132.790823,102.875556 132.790823,86.7386667 C132.790823,70.6013333 126.539909,55.4297778 115.190122,44.0191111 L115 .190122,44.01 91111 Z M65.7000305,92.1311111 L43.2683537,43.0666667 L81.0934604,81.1937778 L103.475625,130.517778 L65.7000305,92.1311111 L65.7000305,92.1311111 Fill the "id =" jade -3 "& Gt; & Lt; / Path & gt; & Lt; / G> & Lt; / Svg & gt;  

However, when the page is added, STVG and its children, the GI element, the client dimensions 0 px, 0 px and nothing is being displayed. Testing in Chrome (38.0.2125.104) and Firefox (32.0.3). Any suggestions?

Even strangers, if I copy the svg output above from a web inspector and paste it into actual HTML, then it works. Is there a problem related to this fact that I am adding SVG after page load ???

You can create a svg element by document.createElement ('svg') Can not use. You can use only Elements to create HTML elements.

It is necessary to go to the SVG namespace, which means that createElementNS ('http://www.w3.org/2000/svg', 'SVG')