I am trying to write some code that allows SVG elements to be dragged around. This is pretty easy with jQuery, jQuery UI and jQuery SVG, and works fine in Firefox, but in Chrome when I drag the SVG element, an offset is apparently added to its coordinates. I can't see anything I'm doing wrong, or discover any known bug in this area.
I've constructed a small example that illustrates the problem:
<html>
<head>
<title>Foo</title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://keith-wood.name/js/jquery.svg.js"></script>
<script type="text/javascript">
$(function() {
var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
$('#piece')
.draggable()
.bind('drag', function (event, ui) {
// Update transform manually, since top/left style props don't work on SVG
var t = event.target.transform.baseVal;
if (t.numberOfItems == 0) {
t.appendItem(svg.root().createSVGTransform());
}
t.getItem(0).setTranslate(ui.position.left, ui.position.top);
});
}
$('#canvas').svg({loadURL: "foo.svg", onLoad: svgOnLoad});
});
</script>
</head>
<body>
<div id="canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>
where foo.svg is just:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
width="450" height="450">
<rect id="piece" width="50" height="50" x="100" y="100" />
</svg>
An online version can be found at:
There seems to be a bug in jQueryUI here: in non-Webkit browsers, the ui.position object uses absolute coordinates, whereas in other browsers it's an offset from ui.originalPosition. I don't know which is correct; the bug is that the behavior is inconsistent. I've filed a bug report at:
http://bugs.jqueryui.com/ticket/8335
The workaround is therefore to store the original coordinates of the top-level element, and set the coordinate to (ui.position - ui.originalPosition + origCoords) when setting the translate transform in Webkit browsers. (Jlange's answer uses the x and y attributes of the rect used in my minimal example, which works fine there, but does not work with more complex objects which a) may not have x and y attributes (e.g. if the top-level element is a g element) and b) where the coordinates returned seem not to be those of the top-level element anyway (I'm afraid I don't know why).) Minimal code follows:
var svgOnLoad = function () {
var svg = $('#canvas').svg('get');
$('#piece')
.draggable()
.on({
dragstart: function (event, ui) {
var tlist = this.transform.baseVal;
if (tlist.numberOfItems == 0) {
tlist.appendItem(svg.root().createSVGTransform());
}
var tm = tlist.getItem(0).matrix;
var pos = {left: tm.e, top: tm.f};
$.data(this, 'originalPosition', pos);
},
drag: function (event, ui) {
// Update transform manually, since top/left style props don't work on SVG
var tlist = this.transform.baseVal;
var CTM = this.getCTM();
var p = svg.root().createSVGPoint();
p.x = ui.position.left + CTM.e;
p.y = ui.position.top + CTM.f;
if ($.browser.webkit) { // Webkit gets SVG-relative coords, not offset from element
var origPos = $.data(this, 'originalPosition');
p.x -= ui.originalPosition.left - origPos.left;
p.y -= ui.originalPosition.top - origPos.top;
}
p = p.matrixTransform(CTM.inverse());
tlist.getItem(0).setTranslate(p.x, p.y);
}});
};
$('#canvas').svg({onLoad: svgOnLoad});
Live version at: http://jsfiddle.net/rrthomas/v477X/