svg中的可拖动矩形仅在屏幕上进行诊断答案

【问题标题】：draggable rect in svg drags only diagnolly on the screensvg中的可拖动矩形仅在屏幕上进行诊断
【发布时间】：2012-04-14 17:58:45
【问题描述】：

我尝试制作一个小程序，在其中编写代码以在 svg 中拖动一个矩形。该程序非常简单。我的问题是矩形只在屏幕上拖动，而不是在整个网页上。

这是我的代码..

<?xml version="1.0"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 width="100%" height="100%"
 onload="Init( evt )" >

<script type="text/ecmascript">
   //<![CDATA[
var svgDocument;
var svgRoot;
var newP;
var bmousedown=0;
var myCirc;

function Init(evt){

svgRoot= document.getElementsByTagName("svg")[0];


   newP = svgRoot.createSVGPoint();
   myCirc = document.getElementById("mycirc");
   }

function getMouse(evt){
   var position = svgRoot.createSVGPoint();
   position.x = evt.clientX;
   position.y = evt.clientY;
   return position;
   }

function onMouseDown(evt){
   bmousedown=1;
   newP=getMouse(evt);
   doUpdate();
   }

function onMouseMove(evt){
   if(bmousedown){
       newP=getMouse(evt);
       doUpdate();
       }
   }

function onMouseUp(evt){
   bmousedown=0;
   }

function doUpdate(){
   myCirc.setAttributeNS(null, "x", newP.x );
   myCirc.setAttributeNS(null, "y", newP.y );
   }

// ]]></script>


<rect id="mycirc" fill: #bbeeff" x="0" y="0" width="80" height="80"

   pointer-events="visible"
   onmousedown="onMouseDown(evt)"
   onmousemove="onMouseMove(evt)"
   onmouseup="onMouseUp(evt)"/>

</svg>

请帮助我，因为我无法理解为什么它不在整个屏幕上移动。

【问题讨论】：

它似乎根本没有拖拽。你能建立一个有效的例子，比如使用jsFiddle，来演示这个问题吗？

标签： svg draggable

【解决方案1】：

我看到在 Firefox 上重新创建了该问题，但这不是一个问题，您的代码到处都是。我建议在发布具体问题之前先回到绘图板。

我还推荐good reference on SVG 或使用JS vector graphics library，因为如果您对深入了解细节不感兴趣，它会简化一些事情并大大简化开发。

【讨论】：

【解决方案2】：

这是正确的解决方案：http://jsfiddle.net/mihaifm/5GHJs/

我认为你犯的错误：

onload="Init( evt )" 使变量 evt 成为全局变量，这是一件糟糕且无用的事情。所有的函数也是全局的，但在这个例子中应该没问题。
对onmousedown 等的函数调用正在使用这个全局evt。（错误的）。为了获得每次调用的正确事件，您需要注册一些处理程序。

【讨论】：