Home/ Questions/Q 6551791
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T12:22:54+00:00

I’ve been working on a UI that uses SVG objects that the user can

  • 0

I’ve been working on a UI that uses SVG objects that the user can interact with.

The problem is this: jQuery UI has virtually no support for SVG. I had to build in this shim to get the SVG objects to move in the right way:

$("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)+')');
});

The technique here came from a response to this question.

This page is the implementation so far. The behaviors I’ve found in different mainstream browsers are these:

  • In Safari, the triangle behaves as designed.
  • In Chrome, the triangle jumps at the beginning of every drag, and moves slower than the cursor.
  • In Firefox, the triangle jumps far at the beginning of the first drag, but the triangle moves with the cursor and doesn’t jump again on subsequent draggings.

Is there some way I can make behavior more consistent? What’s going on here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you already mentioned, jquery-ui is not really developed with SVG in mind. SVG has its own notion of how elements should be efficiently transformed, and its own specialized DOM interfaces for achieving this. In general, you’ll likely be able to achieve better results by understanding these concepts and utilizing these interfaces. The best resource for this is the SVG 1.1 specification: http://www.w3.org/TR/SVG/

    As a quick solution, though, your post motivated me to publish a small library I wrote some time ago, which should fulfill your requirements: https://github.com/jbeard4/svg-drag

    • 0