2


2 つの類似した svg オブジェクトがあります。そのうちの 1 つを 3 倍にして、いくつかの処理を行います。その後、元のサイズにサイズ変更します (スケール 1)。しかし、奇妙なことに、そのストローク幅は変化し、小さくなります。

これはバグですか、それとも何か不足していますか? 簡単な回避策/ハックはありますか? 無数の形を描いています。どんな助けでも大歓迎です。

完全なコードは

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/

4

2 に答える 2

0

これを試して

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

</p>

私の知る限り、それはアンチエイリアシングに関するものです。これを試すことができます：

//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);
于 2012-09-24T22:16:54.667 に答える