Scaling is centred on the origin (0, 0), so if your shape is not centred on (0, 0) it will appear to move. To fix this first translate your shape so it is centred on the origin, then scale it, then translate it back:
transform="translate(78.11 -66.75) scale(2) translate(-78.11 66.75)"
Note that the transformations are done in reverse order.
You could simplify things by creating a shape centred on the origin to start with and then scaling and transforming it.
<path id="container_svg_rectsymbol1" fill="red" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="translate(78.11 -66.75) scale(3)"/>
You could also convert the transform into matrix, which would be more efficient:
<path opacity="0.5" fill="red" stroke-width="1" stroke="Gray" d="M -5 -5 v10 h10 v-10 h-10" transform="matrix(3 0 0 3 78.11 -66.75)"/>
[EDIT] To use jQuery animate, this should work (scaling from 0 to 1 over 4 seconds):
var box = element.getBBox();
var cx = box.x + box.width/2;
var cy = box.y + box.height/2;
$(element).animate(
{ scale: 1 },
{ duration: 4000,
step: function(now, fx) {
scaleVal = now;
$(element).attr("transform", "translate(" + cx + " " + cy + ") scale(" + scaleVal + ") translate(" + (-cx) + " " + (-cy) + ")");
}
}
);