Не получаю консольных ошибок, но скрипт не работает

Question

Когда я запускаю свое «приложение», я генерирую код SVG.

Я нашел ответы здесь, но не нашел своего конкретного вопроса.

Я генерирую допустимый синтаксис SVG с указанным соответствующим атрибутом xmlns.

Я могу посмотреть на инструменты разработчика в Chrome, и тело моего документа генерирует, просто не отображается.

Если я скопирую и вставлю сгенерированное тело в новый HTML-документ, все будет работать.

Моя кодовая база слишком велика (из-за библиотеки, которую я построил) для совместного использования, но я поделюсь копией >> вставки сгенерированного тела в качестве доказательства того, что все работает.

<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>

Мое базовое поколение SVG находится в схеме, соответствующей следующему:

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>

Проблема в следующем: Мой код не работает И НЕ генерирует ошибки на консоли.

Я получаю генерацию тела кода, и мой код "приложения" не работает.

Однако приведенный пример работает, и это противоречиво, но у меня нет сообщений об ошибках, чтобы дать понять, почему.

Это все работает на стороне клиента (Chrome).

Пожалуйста, помогите.

Answer 1

Я добавил следующее к моему сценарию, и он работал, но весьма вероятно, что это неправильный ответ:

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