Drawing more than ~5+ SVG lines with the code below makes performance choppy when moving elements, especially if long SVG lines are drawn. Is this just a natural SVG performance limitation (because of the svg canvas size) or is there something fishy with my code?
Project in action can be seen here (only supports Chrome and Firefox so far, check out fps at bottom left, try spreading out the objects, I get ~14 fps at startup): http://www.nada.kth.se/~benned/celestial/
Some explanation:
SVG.rootElement is a large (100%*100%) svg element created by jQuery.svg placed under all HTML. elem1 and elem2 are draggable HTML elements and NOT SVG elements. I connect elem1 and elem2 with a SVG line and when they move, the line follows. If no SVG is drawn, performance is perfect.
Javascript code (initiates a new SVG line, connects it to two HTML elements and adds event listeners):
addLine = function(elem1, elem2) {
var mouseEvent = function(i, elem) {
var mouseDown = function(e) {
document.addEventListener('mousemove', mouseMove, false);
document.addEventListener('mouseup', mouseUp, false);
}
var mouseMove = function(e) {
line.setAttribute(xi, elem.style.left);
line.setAttribute(yi, elem.style.top);
}
var mouseUp = function(e) {
document.removeEventListener('mousemove', mouseMove, false);
document.removeEventListener('mouseup', mouseUp, false);
}
var xi = "x"+i;
var yi = "y"+i;
mouseMove(); // sets initial position
return mouseDown;
}
var elem1 = document.getElementById(elem1);
var elem2 = document.getElementById(elem2);
var line = SVG.rootElement.line(0, 0, 0, 0, {stroke:"#aa0000", strokeWidth:"5", opacity:.3});
elem1.addEventListener('mousedown', mouseEvent(1, elem1), false);
elem2.addEventListener('mousedown', mouseEvent(2, elem2), false);
}