没有得到控制台错误,但脚本无法正常工作

时间:2018-05-07 16:10:34

标签: javascript html svg

当我运行我的" app"时,我会生成SVG代码。

我已经在这里搜索了答案,但我没有找到我的特定问题。

我正在使用指定的相应xmlns属性生成有效的SVG语法。

我可以查看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>
&#13;
&#13;
&#13;

我的基本版SVG以与以下内容一致的模式找到:

&#13;
&#13;
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);
&#13;
<svg id="can" width="1000px" height="300px" xmlns="http://www.w3.org/2000/svg"></svg>
&#13;
&#13;
&#13;

问题是: 我的代码无效 AND NOT 在控制台生成错误。

我正在生成代码的身体,以及我的应用程序&#34;代码无效。

但是提供的示例是有效的,这是不一致的,但我没有报告错误,以便为我提供原因。

这都是正在运行的客户端(Chrome)。

请帮忙。

1 个答案:

答案 0 :(得分:0)

我将以下内容添加到我的脚本中并且它有效,但很可能它不是正确的答案:

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