没有收到控制台错误，但是脚本不起作用

Question

When I run my "app", I generate SVG code.

I've scoured the answers here, but am not finding my particular issue.

I am generating valid SVG syntax with the appropriate xmlns attribute specified.

I can look at the developer tools in chrome, and the body of my document is generating, its just not displaying.

If I copy and paste the generated body into a new html document everything works.

My code-base is too large (because of the library i have built) to share, but I will share the copy >> paste of the generated body as proof that all is working.

 <svg id="can" width="1000px" height="300px" xmlns="http://www.w3.org/2000/svg"> <g id="rowStack"> <g id="M001_header"> <g onclick="eval(&quot;M001_cb.toggleCheck();&quot;);"> <g> <path d="M0 20 0 40 20 20 " stroke-width="0px" stroke="#333" fill="#333"></path> <path d="M20 20 0 40 20 40 " stroke-width="0px" stroke="#888" fill="#888"></path> <path d="M2 22 2 38 18 38 18 22 " stroke-width="0px" stroke="#CCC" fill="#CCC"></path> </g> <path style="display:none" d="M3.055555555555556 32.77777777777778 4.166666666666667 31.38888888888889 8.055555555555555 35 15.555555555555557 22.22222222222222 16.944444444444446 23.055555555555557 8.333333333333334 37.77777777777778 3.055555555555556 32.77777777777778 " stroke="black" stroke-width="0px" fill="black"></path> <path style="display:none" d="M4 24 4 36 16 36 16 24 " stroke="black" stroke-width="0px" fill="black"></path> </g> <text x="25px" y="35px" font-family="arial" font-size="14" stroke="black" fill="black">M001</text> <g id="M001_ex" onclick="expandoToggle('M001_ex')"> <rect x="120px" y="20px" width="72px" height="72px" fill="#aaa"></rect> <path d="M138 53 153 53 153 38 159 38 159 53 174 53 174 59 159 59 159 74 153 74 153 59 138 59 138 53 " stroke-width="0px" stroke="#333" fill="#333"></path> </g> </g> <g id="M002_header"> <g onclick="eval(&quot;M002_cb.toggleCheck();&quot;);"> <g> <path d="M0 40 0 60 20 40 " stroke-width="0px" stroke="#333" fill="#333"></path> <path d="M20 40 0 60 20 60 " stroke-width="0px" stroke="#888" fill="#888"></path> <path d="M2 42 2 58 18 58 18 42 " stroke-width="0px" stroke="#CCC" fill="#CCC"></path> </g> <path style="display:none" d="M3.055555555555556 52.77777777777778 4.166666666666667 51.388888888888886 8.055555555555555 55 15.555555555555557 42.22222222222222 16.944444444444446 43.05555555555556 8.333333333333334 57.77777777777778 3.055555555555556 52.77777777777778 " stroke="black" stroke-width="0px" fill="black"></path> <path style="display:none" d="M4 44 4 56 16 56 16 44 " stroke="black" stroke-width="0px" fill="black"></path> </g> <text x="25px" y="55px" font-family="arial" font-size="14" stroke="black" fill="black">M002</text> <g id="M002_ex" onclick="expandoToggle('M002_ex')"> <rect x="120px" y="40px" width="72px" height="72px" fill="#aaa"></rect> <path d="M138 73 153 73 153 58 159 58 159 73 174 73 174 79 159 79 159 94 153 94 153 79 138 79 138 73 " stroke-width="0px" stroke="#333" fill="#333"></path> </g> </g> </g> </svg> 

My Basic generation of the SVG is found in a pattern consistent with the following:

 var svgRect = function(id) { this.id = id; this.x = 0; this.y = 0; this.w = 100; this.h = 20; this.elem; return this; } svgRect.prototype.init = function() { this.elem = document.createElementNS('http://www.w3.org/2000/svg','rect'); this.redraw(); return this; } svgRect.prototype.redraw = function() { this.elem.setAttribute('id',this.id); this.elem.setAttribute('x',this.x); this.elem.setAttribute('y',this.y); this.elem.setAttribute('width',this.w + "px"); this.elem.setAttribute('height',this.h + "px"); this.elem.setAttribute('fill','#888'); this.elem.setAttribute('stroke-width','1px'); this.elem.setAttribute('stroke','#AAA'); return this; } var svg = document.getElementById('can'); var rect1 = new svgRect('rect1').init(); rect1.x = 200; rect1.redraw(); svg.appendChild(rect1.elem); var rect2 = new svgRect('rect2').init(); svg.appendChild(rect2.elem); 

 <svg id="can" width="1000px" height="300px" xmlns="http://www.w3.org/2000/svg"></svg> 

The problem is: My code is not working AND NOT generating errors at the console.

I'm getting body generation of the code, and my "app" code is not working.

The example provided however is working, and this is inconsistent, but I have no reported errors to give me a clue as to why.

This is all running client side (Chrome).

Please help.

Answer 1

I appended the following to my script and it worked, but it is highly likely that it is not the right answer:

        var myHTML = svg.innerHTML;
        svg.innerHTML = myHTML;