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?

Community
  • 1
  • 1
Will
  • 5,654
  • 2
  • 23
  • 26

1 Answers1

2

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

jbeard4
  • 12,664
  • 4
  • 57
  • 67
  • Incredible! I'm sure others looking for such an answer will be really pleased to find this. – Will Sep 13 '11 at 05:23
  • I noticed that some of jQuery's fundamental functions like addClass don't work with SVGs either, so I began writing my own functions to accomplish those tasks… derp. – Will Sep 13 '11 at 05:24
  • Yah, jquery is really written to be compatible with HTML DOM. SVG is XML, and there are a few significant differences. For example, I think that jquery uses non-namespaced versions of get/setAttribute. Querying is also not XML namespace-aware. I think jquery also uses innerHtml for some things, which is typically not supported in XML DOM. – jbeard4 Sep 13 '11 at 14:42
  • Your best bet with these things would be to look at the jquery-svg library and see what it supports. It has a plugin to make jquery play nice with SVG DOM (e.g. addClass will work): http://keith-wood.name/svg.html#dom However, I found this plugin would intermittently crash chromium, so YMMV. – jbeard4 Sep 13 '11 at 14:43