Question

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

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

Answer 1

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

我还建议使用good reference on SVG或使用JS vector graphics library，因为它可以简化一些事情，并且如果你不想进入基本事实。

Answer 2

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

我认为你犯的错误：

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

svg中的draggable rect只能在屏幕上对角拖动

2 个答案: