Перетаскивание SVG (w / jQuery UI) отличается в разных браузерах?

Question

Я работал над пользовательским интерфейсом, который использует объекты SVG, с которыми пользователь может взаимодействовать.

Проблема в следующем: пользовательский интерфейс jQuery практически не поддерживает SVG. Мне пришлось встроить эту прокладку, чтобы заставить SVG-объекты двигаться правильно:

$("svg .draggable")
    .draggable()
    .bind('drag', function(event, ui){
        event.target.setAttribute('transform',
            'translate('+(((ui.position.left-rx)*k)-bb.x)+','+(((ui.position.top-ry)*k)-bb.y)+')');
});

Техника здесь пришла из ответа на этот вопрос .

Эта страница пока является реализацией. Поведение, которое я обнаружил в различных основных браузерах, таково:

• В Safari треугольник ведет себя так, как задумано.
• В Chrome треугольник прыгает в начале каждого перетаскивания и движется медленнее, чем курсор.
• В Firefox треугольник прыгает далеко в начале первого перетаскивания, но треугольник перемещается вместе с курсором и больше не прыгает при последующих перетаскиваниях.

Есть ли способ сделать поведение более последовательным? Что здесь происходит?

Answer 1

Как вы уже упоминали, jquery-ui на самом деле не разрабатывается с учетом SVG. SVG имеет собственное представление о том, как элементы должны быть эффективно преобразованы, и свои собственные специализированные интерфейсы DOM для достижения этой цели. В целом, вы, вероятно, сможете достичь лучших результатов, если будете понимать эти концепции и использовать эти интерфейсы. Лучшим ресурсом для этого является спецификация SVG 1.1: http://www.w3.org/TR/SVG/

Однако, как быстрое решение, ваш пост побудил меня опубликовать небольшую библиотеку, которую я написал некоторое время назад, которая должна соответствовать вашим требованиям: https://github.com/jbeard4/svg-drag