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:
