Question

我一直在使用一个使用用户可以与之交互的SVG对象的UI。

问题在于：jQuery UI几乎不支持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)+')');
});

这里的技术来自对this question的回应。

This page是迄今为止的实施。我在不同的主流浏览器中发现的行为是：

在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

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

1 个答案: