svg webtopo原型7 设备_topo7topo8-优快云博客

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

设备就是goup+img+text

有了img的基础，实现设备的基本显示就相对简单了。

不过处理设备的移动，又遇到了难题。

直接设置group的坐标是不起作用的，可以通过设置grouo内部元素的坐标来实现启动，不过这种方式太笨拙了。

Svg直接提供了位移的变形方法，可以实现移动。不过需要注意，这个方法是相对初始位置的坐标移动。

4dev.htm

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>
设备
</title>
 <meta http-equiv="X-UA-Compatible" content="chrome=1">
<!-- legengd.html
 1.显示设备（文字、图片）
 2.兼容ie和opera以及chrome frame.myie使用动态embed
  chome和opera用create
 3.为了保证embed加载完毕，使用延迟函数
-->
</head>
<script type="text/javascript" language="javascript" src="./js/svg2.js"></script>
<script>

</script>

<body bgcolor="#ffffff">

<br>
<button onclick="show()">开始</button><br>
<button onclick="zoomby(0.5)">缩小2倍cor</button><br>
<button onclick="zoomby(2)">放大 2倍cor</button><br>
<button onclick="zoom(1,300,300)">还原</button><br>
<button onclick="showsrc()">源码</button><br>
<button onclick="move()">移动</button><br>

<div id="divsvg"></div>
<div style='cursor:move'>testmove</div>
</body>
<script>


var svg;
//var svgdoc;
var plat;

function move(){
 //验证一下svg的group能否整体移动
  var svgdoc=getSVGDocument(svg);
  var plat=svgdoc.getElementById('DEV00005');
  //var plat=svgdoc.getElementById('testrec');
  
  //对g不起作用
   // plat.setAttribute("x",150);
  //可以
  plat.setAttribute("transform","translate(50,0)");
}


function show(){

 svg=initSVG(300,300);
 //延迟一下，最小是10ms
 var tidst=window.setTimeout(show1,20);
}

function show1(){
 //var svg;
 //svg=initSVG(200,200);
 //var svgdoc;
 svgdoc=getSVGDocument(svg);
 plat=getrootg(svg,svgdoc);
 

 //生成一个设备
 //alert("hi");
 curentStyle="stroke:black;fill:white";
 //cursor在ie中不一样,在opera中有效
 curentStyle="stroke:black;fill:green;cursor:hand";
 rec=createrect(svgdoc,100,100,3,curentStyle);
 rec.setAttribute("id","testrec");
 var device=createDev("DEV00005",100,100,29.0,17.0,"./image/DEV_IP_R.gif","XM-BB-GSR12816-D-1.MAN(61.154.237.12)");
 //修改设备的属性
 //device.setAttribute("deviceid","DEV00005");
 //refresh();


 }
</script>
</html>