当我运行我的" 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("M001_cb.toggleCheck();");">
<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("M002_cb.toggleCheck();");">
<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;
我的基本版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);
&#13;
<svg id="can" width="1000px" height="300px" xmlns="http://www.w3.org/2000/svg"></svg>
&#13;
问题是: 我的代码无效 AND NOT 在控制台生成错误。
我正在生成代码的身体,以及我的应用程序&#34;代码无效。
但是提供的示例是有效的,这是不一致的,但我没有报告错误,以便为我提供原因。
这都是正在运行的客户端(Chrome)。
请帮忙。
答案 0 :(得分:0)
我将以下内容添加到我的脚本中并且它有效,但很可能它不是正确的答案:
var myHTML = svg.innerHTML;
svg.innerHTML = myHTML;