jquery - 创建可拖动的 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);