創建一個可拖動的Svg組

Question

我使用jquery svg插件（http://keith-wood.name/svg.html）以編程方式創建svg形狀。拖動似乎對矩形工作正常，但是在處理分組對象時（我有一個代表按鈕的對象），或者處理文本拖動時是片狀的。物體移動但不是它們應該在的地方（它們跳到svg繪圖區域的不同區域）。

下面是一些示例代碼：

function makeDraggable(svgComponent) { 
var svg = $('#svgscreen').svg('get'); 


$('#' + svgComponent.name, svg.root()).draggable().bind('drag', function(event, ui) 
    { 
    event.target.setAttribute('x', ui.position.left); 
    event.target.setAttribute('y', ui.position.top); 
}); 


} 

一旦有人不得不面對這樣的事情我將不勝感激的任何建議。組件名稱是svg形狀（或分組對象情況下的組）的唯一ID

Answer 1

我遇到了對象 - 不是 - 它們應該成爲問題的地方。我通過將下面的代碼放入我的「拖動」功能來修復它：

// Setup (this code is actually outside of my 'drag' function, but it doesn't matter 
// Replace svg-id with whatever custom id='' you have on your <svg> tag 
var canvas = document.getElementById("svg-id"); 
var SVGMatrix = canvas.getScreenCTM().inverse(); 
var point = canvas.createSVGPoint(); 

// Convert html coordinates to SVG coordinates 
point.x = event.pageX; 
point.y = event.pageY; 
point = point.matrixTransform(SVGMatrix); 

// Update coordinates manually, since SVG uses its own attributes 
event.target.setAttribute('cx', point.x); 
event.target.setAttribute('cy', point.y);