Search code examples
svgraphaeltransformscale

After resize stroke width changes absurdly in raphael.js


I have two similar svg objects. I scale one of them by 3 and do some stuff. And after that, I resize it to its original size (scale by 1). However, the strange thing is its stroke width changes, gets smaller.

Is this a bug or am I missing something? Is there a simple workaround/hack? I'm drawing zillions of shapes. Any help would be appreciated.

The full code is

pageWidth = $(window).width();
pageHeight = $(window).height();
r = Raphael("holder",pageWidth, pageHeight);

r.setStart();
circ = r.circle(250,250,100,100).attr({'stroke-width':10, 'fill':'green'});
rct = r.rect(200,200,100,100).attr({'stroke-width':2,'fill':'grey'});

st = r.setFinish();

circ2 = r.circle(350,450,100,100).attr({'stroke-width':10, 'fill':'green'});
rct2 = r.rect(300,400,100,100).attr({'stroke-width':2,'fill':'grey'});


x = circ.attr('cx');
y = circ.attr('cy');

setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);

setTimeout(function(){st.animate({'transform':'s1,1'},1500)},3000);

http://jsfiddle.net/WFtaG/23/

Solution

  • Try this

    setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);
setTimeout(function(){st.animate({'transform':'s1,1,'+x+','+y},1500)},3000);

    ​

    As far as I know it's about antialiasing. You could try this:

    //setTimeout(function(){st.animate({'transform':'s3,3,'+x+','+y},1500)},1000);
//setTimeout(function(){st.animate({'transform':'s1,1'},1500)},3000);
setTimeout(function(){st.animate({'transform':'t1,1'},15000)},3000);