Question

我为raphaeljs库绘制了以下Facebook图标，现在我希望在调整浏览器大小时调整图标大小。如何使用Raphael创建响应式图标？

var paper = Raphael(10, 10, 800, 800);

FacebookBack=paper.path('M 285.5 270.5 C 285.5 277.1 280.1 282.5 273.5 282.5 L 18.5 282.5 C 11.9 282.5 6.5 277.1 6.5 270.5 L 6.5 19.5 C 6.5 12.9 11.9 7.5 18.5 7.5 L 273.5 7.5 C 280.1 7.5 285.5 12.9 285.5 19.5 L 285.5 270.5Z');
FacebookBack.attr({'fill':'#787887','stroke':'#000000','stroke-miterlimit':'10'});

F=paper.path('M 133.8 102.8 L 160.8 102.8 L 160.8 90.5 L 160.8 78.5 L 160.8 76.5 C 160.8 65 161.1 47.1 169.5 36.1 C 178.3 24.4 190.5 16.4 211.4 16.4 C 245.4 16.4 259.8 21.3 259.8 21.3 L 253 61.3 C 253 61.3 241.8 58 231.3 58 C 220.8 58 211.4 61.8 211.4 72.3 L 211.4 76.5 L 211.4 90.5 L 211.4 102.8 L 254.4 102.8 L 251.4 141.8 L 211.4 141.8 L 211.4 277.5 L 160.8 277.5 L 160.8 141.8 L 133.8 141.8 L 133.8 102.8 L 133.8 102.8Z');
F.attr({fill:'#ffffff'});

LowerLight=paper.path('M 8.3 231.5 C 8.3 220.5 17.2 211.5 28.3 211.5 L 258.3 211.5 C 269.3 211.5 278.3 220.5 278.3 231.5 L 278.3 257.6 C 278.3 268.6 269.3 277.6 258.3 277.6 L 28.3 277.6 C 17.2 277.6 8.3 268.6 8.3 257.6 L 8.3 231.5 L 8.3 231.5Z');
LowerLight.attr({'fill':'#ffffff','stroke':'none','stroke-width':'0','fill-opacity':'0.2','stroke-opacity':'0'});

UpperLight=paper.path('');
UpperLight.attr({'fill':'#fffM 0 123.9 C 39.9 138.9 89.9 147.7 144.3 147.7 C 198.3 147.7 248.2 138.9 288 124.1 L 288 25 C 288 11.2 276.8 0 263 0 L 25 0 C 11.2 0 0 11.2 0 25 L 0 123.9 L 0 123.9Zfff','stroke':'none','stroke-width':'0','fill-opacity':'0.2','stroke-opacity':'0'});

var FacebookLogo=paper.set(FacebookBack,F,LowerLight,UpperLight);

Answer 1

感谢

德米特里·巴拉诺夫斯基

我得到了答案：

var FacebookLogo = paper.set(FacebookBack,F,LowerLight,UpperLight).transform("s0.25,0.25,0,0");

Click here for a working Example

如何使用浏览器大小缩放在raphaeljs中创建的Vector路径？

1 个答案: