js操作svg

1，功能 鼠标位置放大缩小、支持拖动。

通过java后台服务返回的url，然后加载到浏览器中。(谷歌)

主要代码:

因为必须要等svg全部加载完以后才能初始话svgdoc。

注册事件要注册到svg元素上(最外层的div接受不到冒泡阻止了)

//成功返回之后调用的函数
success:function(retUrl){
var url = retUrl;
var embed = document.createElement("EMBED");
embed.setAttribute("id", "svgDoc");
embed.setAttribute("type", "image/svg+xml");
embed.setAttribute("src", "file/1.svg");
embed.setAttribute("width","100%");
embed.setAttribute("height","100%");

document.getElementById("test").appendChild(embed);
embed.οnlοad=function(){
var doc = document.getElementById("svgDoc"); //获得embed标签对象  
var svg = doc.getSVGDocument();//获得svg的document对象 
svgDoc=svg.documentElement;//获取svg文档对象
//像素转单位  屏幕像素跟svg单位互相转换
_bBox=svgDoc.getAttribute("viewBox");

svgDoc.οnclick=function(e){
debugger;

console.log("click");
}
needMove=false;
startX=0;
startY=0;
svgDoc.οnmοusedοwn=function(event){
      needMove=true;  
console.log("down");
startX = event.pageX;  
startY = event.pageY;
      }
     svgDoc.οnmοusemοve=function(event){
      if(!needMove) return;
var vBoxArr=svgDoc.getAttribute("viewBox").split(/\s+/);
var unit=pxToSvgUnit();
var str=(vBoxArr[0]*1-event.pageX*unit.x+startX*unit.x)+" "+(vBoxArr[1]*1-event.pageY*unit.y+startY*unit.y)+" "+vBoxArr[2]+" "+vBoxArr[3];
console.log(str);
svgDoc.setAttribute("viewBox", str);

startX=event.pageX;
startY=event.pageY;

     }
 svgDoc.οnmοuseup=function(event){
  needMove=false;
console.log("up");
 }



}
},