在JS中如何将一个XML对象添加到SVG中，实现动态加载

woodsmith 2007-04-25 10:28:07

我正在做一个SVG发布图，以一个SVG图做底图，在上面标注设备等，我希望实现在地图加载完成之后，再加载上面的设备图型。这些设备图和底图分别放在两个s文件中，现在我遇到的问题是，无法将设备图形加入到SVG中，我的测试代码如下：
var svg1 = document.embeds("webBrush");
var s="<rect id=\"rect_276657302\" x=\"215\" y=\"267\" height=\"78\" width=\"165\" stroke=\"red\" stroke-width=\"1\" fill=\"white\" fill-opacity=\"0\" stroke-dasharray=\"none\"/>";

var node1 =svg1.window.parseXML(s);
//alert(node1.documentElement);
var obj=svgDocument.getElementById("drawBoard"); //添加设备的位置
obj.appendChild(node1.documentElement); //这里出错

//alert(svg1.window.printNode(obj));

请指教

...全文

932 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

woodsmith 2007-04-29

打赏
举报

已解决

RexZheng 2007-04-25

打赏
举报

没法帮你测试,代码不完整

woodsmith 2007-04-25

打赏
举报

其中a.htm文件第13行
obj.appendChild(node1.documentElement);
被我注释掉了，就是这行出错

woodsmith 2007-04-25

打赏
举报

file "a.htm";
<html>
<head>
<script language="javascript">
function window.onload()
{
var svgDocument=document.webBrush.getSVGDocument();
var svg1 = document.embeds("webBrush");
var s="<rect id=\"rect_276657302\" x=\"215\" y=\"267\" height=\"78\" width=\"165\" stroke=\"red\" stroke-width=\"1\" fill=\"white\" fill-opacity=\"0\" stroke-dasharray=\"none\"/>";

var node1 = svg1.window.parseXML(s);
alert(node1.documentElement);
var obj=svgDocument.getElementById("drawBoard");
// obj.appendChild(node1.documentElement);

alert(svg1.window.printNode(obj));

}
</script>
</head>
<body>
<embed id="webBrush" name="webBrush" src="MySVG.svg" width="900" height="640" type="image/svg-xml"></embed>
</body>
</html>

MySVG.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="400" height="200" preserveAspectRatio="xMidYMid meet" zoomAndPan="magnify" xmlns="http://www.w3.org/2000/svg">

<desc>Basic shapes</desc>

<g>

<circle cx="50" cy="50" r="25"/>

<ellipse cx="75" cy="125" rx="50" ry="25"/>

<rect x="155" y="5" width="75" height="100"/>

<rect x="250" y="5" width="75" height="100" rx="30" ry="20"/>

<line x1="0" y1="150" x2="400" y2="150" stroke-width="2" stroke="blue"/>

<polyline points="50,175 150,175 150,125 250,200"/>

<polygon points="350,75 379,175 355,175 355,200 345,200 345,175 321,175"/>

<rect x="0" y="0" width="400" height="200" fill="none" stroke="red" stroke-width="3"/>

</g>

<g id="drawBoard" >
</g>

</svg>