Создать перетаскиваемую группу 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 (или группы в случае сгруппированных объектов)

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