[svg-developers] Performance issues on Raphael JS with more than 3000 elements

[[e-mail] [svg-developers]]

Hello everybody,

I'm having performance issues creating a seating plan using Raphael JS and raphael.pan-zoom.js.

I tried removing the event handlers. I rounded the coordinates to INTs, I used the raphael JS grouping plugin. Nothing of it helped improving the performance when moving the SVG elements around.


var inDetails = false;
var container = $("#map");
var r = Raphael('map', container.width(), container.height());
var panZoom = r.panzoom({ initialZoom: 0, initialPosition: { x: 0, y: 0} });
var isHandling = false;
var circleRadius = 4;
var g = null; // Our SVG group


$.each(sitze, function (key, data) {
var obj = r.circle(parseInt(data.xWert),parseInt(data.yWert),circleRadius)
.attr({fill:"#C9C", stroke:"#C3C"})
});





Am I missing something? What may I do to improve the performance.


Please help immediately.



Thanks in advance


Regards
Alex