在svg中可拖動的矩形只拖動屏幕上的診斷

我嘗試了一個小程序，在這裏我寫了代碼來拖動一個矩形的svg。該計劃非常簡單。我的問題是，矩形只拖動屏幕上的診斷，而不是整個網頁上。在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>

請幫助我，因爲我無法理解爲什麼它不能在整個屏幕上移動。

來源

2012-04-14 tanya

它似乎並沒有拖動。你可以設置一個工作示例，比如說使用[jsFiddle]（http://www.jsfiddle.net）來演示問題嗎？ – 2012-04-14 18:19:56