这个例子是测试设备的显示。
主要就是用g来包含图片和文本。
这块遇到的困难有点超出想象。
开始创建的image对象怎么也无法显示。
但是生成的源码另存后是可以显示的。
百般不解。
最后还是通过分析webtopology的源码发现,
Image的连接必须写成
image.setAttributeNS("http://www.w3.org/1999/xlink","href",imageSrc);
而不能写成
image.setAttribute("xlink:href",imageSrc;
5img.htm
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script type="text/javascript" language="javascript" src="./js/svg2.js"></script>
<title>
图例
</title>
</head>
<body bgcolor="#ffffff">
<br>
<button οnclick="show()">开始</button><br>
<button οnclick="showsrc()">源码</button><br>
<div id="divsvg">
</div>
</body>
<script>
var svg;
var plat;
function show(){
svg=initSVG(300,300);
//延迟一下,最小是10ms
var tidst=window.setTimeout(show1,20);
}
function show1(){
svgdoc=getSVGDocument(svg);
plat=getrootg(svg,svgdoc);
//var newRect=document.createElementNS('http://www.w3.org/2000/svg',"image");
var newRect=createsvgele("image");
newRect.setAttribute("x",80);
newRect.setAttribute("y",80);
//这个是必须的
//newRect.setAttribute("width",20);
//newRect.setAttribute("height",20);
//只能静态
// newRect.setAttribute("xlink:href",'./image/DEV_IP_R.gif');
//这样就可以
newRect.setAttributeNS("http://www.w3.org/1999/xlink","href",'image/ALCATEL.gif');
//这样不行
//newRect.setAttribute("href",'./image/DEV_IP_R.gif');
plat.appendChild(newRect);
}
</script>
</html>
相应的js, svg2.hs
对svg的基本操作进行了一些简单封装。
//1.基本函数
var isIE=false;
//判断是否IE浏览器
function checkBrowser()