Рисование более ~ 5 + линий SVG с помощью приведенного ниже кода снижает производительность при перемещении элементов, особенно если рисуются длинные линии SVG. Это просто естественное ограничение производительности SVG (из-за размера холста svg) или в моем коде что-то подозрительное?
Проект в действии можно увидеть здесь (пока поддерживаются только Chrome и Firefox, посмотрите fps внизу слева, попробуйте разложить объекты, я получаю ~ 14 fps при запуске): http://www.nada.kth.se/~benned/celestial/
Некоторые объяснения:
SVG.rootElement - это большой (100% * 100%) элемент svg, созданный jQuery.svg и размещенный под всем HTML. elem1 и elem2 - перетаскиваемые элементы HTML, а не элементы SVG. Я соединяю elem1 и elem2 линией SVG, и когда они двигаются, линия следует. Если SVG не прорисован, производительность безупречна.
Javascript-код (инициирует новую строку SVG, соединяет ее с двумя элементами HTML и добавляет прослушиватели событий):
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);
}