我一直在开发一个使用用户可以与之交互的 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)+')');
});
这里的技术来自对 这个问题。
此页面是迄今为止的实现。我在不同主流浏览器中发现的行为如下：
- 在 Safari 中，三角形的行为符合设计。
- 在 Chrome 中，三角形在每次拖动开始时都会跳跃，并且移动速度比光标慢。
- 在 Firefox 中，三角形在第一次拖动开始时会跳得很远，但三角形会随着光标移动，并且在后续拖动时不会再次跳跃。
有什么方法可以让我的行为更加一致吗？这是怎么回事？
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?
发布评论
评论（1）
正如您已经提到的，jquery-ui 并不是真正根据 SVG 开发的。 SVG 对于如何有效地转换元素有自己的概念，并且有自己专门的 DOM 接口来实现这一点。一般来说，通过理解这些概念并利用这些接口，您可能能够获得更好的结果。最好的资源是 SVG 1.1 规范：http://www.w3.org/TR/SVG /
不过，作为一个快速解决方案，您的帖子促使我发布了我不久前编写的一个小型库，它应该满足您的要求：https://github.com/jbeard4/svg-drag
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