捕獲鼠標移動SVG

Question

我想創建一個小的可拖動SVG矩形和HTML 5頁面。我想要做的是在鼠標點擊rect元素時捕獲鼠標。不幸的是，似乎setCapture在SVG元素上不可用。是否有另一種方法獲得對HTML5中鼠標事件的Rect的獨佔訪問權限？

Answer 1

您可以使用addeventlisteners。下面是製作svg元素能拖的例子： - （我使用的屬性，以確保其唯一的SVG元素）

document.addEventListener('mousedown',mousedownfunction,false); 

var Selectedelement=null; 

function mousedownfunction(event){ 

    if(event.target.hasAttribute('isdraggable'){ 
    Selectedelement=event.target; 
    document.addEventListener('mousemove',mousemovefunction,false); 
    document.addEventListener('mouseup',mouseupfunction,false);  
    } 

} 

function mousemovefunction(event){ 
    // move your element here (logic of dragging) 
} 

function mouseupfunction(event){ 
document.removeEventListener('mousemove',mousemovefunction,false); 
document.removeEventListener('mouseup',mouseupfunction,false); 
} 

注： - 我have'nt測試，但它會工作。確保你設置屬性'isdraggable'rect即<rect x=0 y=0 width=100 height=100 isdraggable='true' />