2012-04-12 73 views
2

我在我的网站一对夫妇拉斐尔图标是这样的:拉斐尔图标大小

var emailIcon = Raphael("js-email-icon"); 
    emailIcon.path('M28.516,7.167H3.482l12.517,7.108L28.516,7.167zM16.74,17.303C16.51,17.434,16.255,17.5,16,17.5s-0.51-0.066-0.741-0.197L2.5,10.06v14.773h27V10.06L16.74,17.303z').attr({fill: '#ff00ff', stroke: "none"}); 

我怎样才能让图标变大?

谢谢!

MB

回答

0

编辑:好吧,意识到你可能不会使用jQuery这是哪里的.css()的由来。

我会建议使用jQuery和尝试:

$(emailIcon.path('M28.516,7.167H3.482l12.517,7.108L28.516,7.167zM16.74,17.303C16.51,17.434,16.255,17.5,16,17.5s-0.51-0.066-0.741-0.197L2.5,10.06v14.773h27V10.06L16.74,17.303z').attr({fill: '#ff00ff', stroke: "none"})).css({width: "500px", height: "500px"}); 

我只是包装一切都交给attr像这样$(...).css({width:'500px',height:'500px'})

$(emailIcon.path(...).attr({fill...stroke...})).css({width:'500px',height:'500px'}); 

如果你不想使用jQuery,然后AS LONG作为Rapheal .attr()函数返回DOM元素,你可以这样做:

var tmp = emailIcon.path(...).attr({fill...stroke...}); 
tmp.style.width= '500px'; 
tmp.style.height= '500px'; 
+1

这实际上不起作用。任何其他想法? – 2012-04-12 17:54:57

3

使用变换方法:http://raphaeljs.com/reference.html#Element.transform

例如,使其正常大小的150%:

var emailIcon = Raphael("js-email-icon"); 
var iconPath = emailIcon.path('M28.516,7.167H3.482l12.517,7.108L28.516,7.167zM16.74,17.303C16.51,17.434,16.255,17.5,16,17.5s-0.51-0.066-0.741-0.197L2.5,10.06v14.773h27V10.06L16.74,17.303z').attr({fill: '#ff00ff', stroke: "none"}); 
iconPath.transform("s1.5"); 
0

如果你有一个实际的SVG文件用,最简单的方法来工作,我建议使用Adobe Illustrator或Inkscape等程序来修改图标的大小。一旦完成,只需提取路径信息,然后会出现一个更大的图标。

这些程序将为您做所有的杂乱路径计算,并让您在应用代码之前了解它的外观。但是,在使用Inkscape时要小心,因为有时它不会修改路径,只是向对象拉斐尔用户不做任何事情的对象添加变换。