0

我尝试制作一个小程序，在其中编写代码以在 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>

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

4

2 回答 2

0

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

我还推荐一个关于 SVG或使用JS 矢量图形库的好参考，因为如果您对深入了解细节不感兴趣，它会简化一些事情并大大简化开发。

于 2012-04-14T18:47:52.337 回答
0

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

我认为你犯的错误：

  • onload="Init( evt )" 使变量成为evt全局变量，这是一件糟糕且无用的事情。所有的函数也是全局的，但是对于这个例子来说应该没问题。
  • 等的函数调用onmousedown正在使用这个 global evt。（错误的）。为了获得每个调用的正确事件，您需要注册一些处理程序。
于 2012-04-15T15:55:49.360 回答