svg webtopo原型4-图片的动态显示

最新推荐文章于 2025-05-13 00:32:43 发布

laputa73

最新推荐文章于 2025-05-13 00:32:43 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： svg web编程文章标签： function image javascript microsoft xhtml null

本文链接：https://blog.youkuaiyun.com/laputa73/article/details/7710631

本文探讨了在SVG中实现动态显示图片的问题。通过分析源码，发现使用`image.setAttributeNS`方法设置`xlink:href`属性才能正确显示图片，而非直接使用`image.setAttribute`。此外，还提供了相关JS和SVG的简单封装示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个例子是测试设备的显示。

主要就是用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 onclick="show()">开始</button><br>
<button onclick="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的基本操作进行了一些简单封装。