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);

创建一个可拖动的Svg组

1 个答案: