SVG拖动（带jQuery UI）在不同的浏览器中是不同的？

我一直在开发一个用户界面，它使用用户可以交互的SVG对象

问题在于：jQueryUI实际上不支持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中，三角形在第一次拖动开始时会跳远，但三角形会随着光标移动，在后续拖动时不会再次跳转

---

有什么方法可以让我的行为更加一致吗？这里发生了什么？

正如您已经提到的，jQueryUI并没有真正考虑到SVG。SVG有它自己的关于如何有效转换元素的概念，并有它自己的专用DOM接口来实现这一点。一般来说，通过理解这些概念并利用这些接口，您可能会获得更好的结果。这方面的最佳资源是SVG 1.1规范：

---

不过，作为一个快速解决方案，您的帖子促使我发布了一个我不久前写的小库，它应该满足您的要求：

难以置信！我相信其他寻找这样答案的人会非常高兴地发现这一点。我注意到jQuery的一些基本函数（如addClass）也不能与SVG一起工作，所以我开始编写自己的函数来完成这些任务……derp.Yah，jQuery的编写真的是为了与HTML DOM兼容。SVG是XML，有几个显著的区别。例如，我认为jquery使用非命名空间版本的get/setAttribute。查询也不支持XML名称空间。我认为jquery在某些方面也使用innerHtml，这在XML DOM中通常是不受支持的。它有一个插件，可以让jquery在SVG DOM中很好地发挥作用（例如addClass可以工作）：但是，我发现这个插件会间歇性地使chromium崩溃，所以YMMV。