Sorry that I could not compile jsfiddle because it's jsf application hosted locally and code is dependent on data from jsf application. Although I have arrange part of it and part if it as snippet here. Now Everything's correct in Firefox. Suddenly when I open it in chrome something happened. The text on raphael paper suddenly gets scattered in the paper. It's not where it's meant to be. This happens when I convert svg to image and again generate svg. Everything works fine in Firefox. There is chagne id dy of tspan

dy=3.09499999 dy=432.0949999999999 Why is there this change in dy although x and y are same?

SVG Correct: The fiddle is here.

SVG Incorrect: The fiddle is here.

function printMap(){

    var svg = $('#map').html().replace(/>\s+/g, ">").replace(/\s+</g, "<");
    // strips off all spaces between tags

    canvg('cvs', svg, {        
        ignoreMouse: true, 
        ignoreAnimation: true
    });  
    var canvas  = document.getElementById('cvs');
    var img = canvas.toDataURL("image/png");

    $("#resImg").attr("src",img);
    $("#resImg").css("display",'block');
    //$("resImg").css("display",'none');
    $("#map").css("display",'none');

//  location.href = img; 
}

Before: Text are above the object:

After: Texts are scattered: