svg+js+path直线的拖动与缩放

<svg width="800" height="800" >
 <script><![CDATA[                    
      var SVGDocument = null;  
      var SVGRoot = null;
      var TrueCoords = null;
      var Point = null;
      var BackDrop = null;
      var DragTarget = null;
      var dArray  = new Array(12);//定义path  d属性的数组
      var dragger = null;
      var x; //当前鼠标(坐标)
      var y;
      var X1;//起点坐标
      var Y1;
      var XL1;//path  L1坐标
      var YL1;
      var XL2;//path  YL2坐标
      var YL2;
      var CX1; //path  C坐标
      var CY1
      var CX2;
      var CY2;
      var CX3;
      var CY3;
      var xx1;//起点感知范围
      var yy1;
      var xx2;//终点感知范围
      var yy2;
      var newXx = 0;//矩阵增量
      var newYy = 0;
      var moveObject = null;//移动之后销毁源对象赋值新对象
  
 function Doonmouseover(evt)  {
      var onObject =  evt.getTarget();
       ParsePath(evt);//调用给path数组赋值的函数
      
         x=evt.clientX
         y=evt.clientY
 
         X1 =  dArray[0] ;   //起始坐标
        Y1 =  dArray[1] ;
       X2 =  dArray[10] ;  //终点坐标(L2坐标)
        Y2 =  dArray[11] ;
        XL1 =  dArray[2] ;  //path  L1坐标
   YL1 =  dArray[3] ;
         CX1 =  dArray[4] ;  //path  C坐标
         CY1 =  dArray[5] ;
         CX2 =  dArray[6] ;
         CY2 =  dArray[7] ;
         CX3 =  dArray[8] ;
         CY3 =  dArray[9] ;
   
  if(moveObject!=null){//是否在移动之后感知
   xx1 = Math.abs(X1-(x-newXx));
   yy1 = Math.abs(Y1-(y-newYy));
         xx2 = Math.abs(X2-(x-newXx));
   yy2 = Math.abs(Y2-(y-newYy));
   }
   else{
   xx1 = Math.abs(X1-x);
   yy1 = Math.abs(Y1-y);
         xx2 = Math.abs(X2-x);
   yy2 = Math.abs(Y2-y);
  }
  if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4)))
    { 
     onObject.getStyle().setProperty("cursor", "n-resize");
   }
   else
   {
   onObject.getStyle().setProperty("cursor", "hand");
      }
     
     }
 function Donload(evt) {
   
         SVGDocument = evt.target.ownerDocument;
         SVGRoot = SVGDocument.documentElement;
      TrueCoords = SVGRoot.createSVGPoint();
         GrabPoint = SVGRoot.createSVGPoint();
      BackDrop = SVGDocument.getElementById("BackDrop");
   
      }

 function Donmousedown(evt)
      {
   var onObject =  evt.getTarget();
         if ( BackDrop != onObject )
          {
             if(((xx1<4)&&(yy1<4))||((xx2<4)&&(yy2<4)))
      {
   dragger = onObject ; //从新定义对象以便于拖动
         dragger.getStyle().setProperty("cursor", "n-resize");  
           }
            else{
            DragTarget = onObject ;
         DragTarget .getStyle().setProperty("cursor", "move"); 
            DragTarget.parentNode.appendChild( DragTarget );
            DragTarget.setAttributeNS(null, "pointer-events", "none");
            var transMatrix = DragTarget.getCTM();
            GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
            GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
   
         }
      }
}

 function Donmousemove(evt)  {
        
  if(dragger!=null)
  { 
            x=evt.clientX;
            y=evt.clientY; 
            var yUpdate = y-newYy;//校正矩阵移动后的<Y>值
           
      if((xx1<4)&&(yy1<4))
   {
         dragger.getStyle().setProperty("cursor", "n-resize");
         dragger.setAttribute("d","M139.5,"+yUpdate+",L139.5 ,118.0 ,C146.0 ,118.0 ,146.0 ,131.0, 139.5, 131.0,L139.5 ,"+Y2);  
   Y1 = yUpdate;
    }  
   if((xx2<4)&&(yy2<4))
   {
   dragger.getStyle().setProperty("cursor", "n-resize");
         dragger.setAttribute("d","M139.5,"+Y1+",L139.5 ,118.0 ,C146.0 ,118.0 ,146.0 ,131.0, 139.5, 131.0,L139.5 ,"+yUpdate);
         Y2 = yUpdate;  
    }
  }
  
 else
  {
   GetTrueCoords(evt);
    if (DragTarget)
    {  
    var newX = TrueCoords.x - GrabPoint.x;
    var newY = TrueCoords.y - GrabPoint.y;
    DragTarget.setAttributeNS(null, "transform", "translate(" + newX + "," + newY + ")");
    newXx = newX;
       newYy = newY;    
         }
    }   
      }

 function Donmouseup(evt) {
  dragger = null;
  if ( DragTarget )
         {
              var targetElement = evt.target;
            DragTarget.setAttributeNS(null, "pointer-events", "all");
            if ( "Folder" == targetElement.parentNode.id )
            {
               targetElement.parentNode.appendChild( DragTarget);
            }
           moveObject = DragTarget;//如果拖动后赋值给全局新对象以便在over里判断
           DragTarget = null;    //把原对象赋值为空
         }
      }

 function GetTrueCoords(evt)//矩阵的移动应用在onmousemove里边
      {
         var newScale = SVGRoot.currentScale;
         var translation = SVGRoot.currentTranslate;
         TrueCoords.x = (evt.clientX - translation.x)/newScale;
         TrueCoords.y = (evt.clientY - translation.y)/newScale;
      }
 function ParsePath(evt){//获取当前path的路径
 
   var onObject =  evt.getTarget();
     var d = onObject.getAttribute("d");//得到Path属性的d数值
      var regex=new RegExp("[ ,]");
     var arr=d.split(regex);
     var regex1=new RegExp("[a-zA-Z]");
     for( var i=0;i<arr.length;i++)
    {
    var s=arr[i].replace(regex1,"");
    dArray[i] =  s;//给数组进行赋值 
     }
    }
]]></script>
 <g id="all" onmousemove="Donmousemove(evt)" onmouseup="Donmouseup(evt)">
  <g>
   <rect id="BackDrop" x="-10%" y="-10%" width="110%" height="110%" fill="none" pointer-events="all"/>
  </g>
     <g>
   <path onload="Donload(evt)"   onmouseover="Doonmouseover(evt)" onmousedown="Donmousedown(evt)" d="M139.5 50,L139.5 118.0 C146.0 118.0 146.0 131.0 139.5 131.0,L139.5 240.0" value="34,56 76,65  " id="line3" biztype="line" style=" cursor:   ;stroke:#F66;stroke-width:1;opacity:0.9;"/>
  </g>                                                   
 </g>   
</svg>

摘自：http://blog.donews.com/seven_ing/archive/2008/08/19/1336956.aspx

加支付宝好友偷能量挖...