Javascript 拉斐尔图标大小

Javascript 拉斐尔图标大小,javascript,raphael,graphael,Javascript,Raphael,Graphael,我的网站上有两个拉斐尔图标,如下所示: 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({fil

我的网站上有两个拉斐尔图标,如下所示:

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

编辑:好的,意识到您可能没有使用jQuery,而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({宽度:'500px',高度:'500px'))

如果不想使用jQuery,那么只要Rapheal.attr()函数返回DOM元素,就可以执行以下操作:

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

使用变换方法:

例如,要使其达到正常大小的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");

如果您有一个实际的svg文件要处理,我建议最简单的方法是使用Adobe Illustrator之类的程序,或者修改图标的大小。完成后,只需提取路径信息,瞧,一个更大的图标就会出现

这些程序将为您完成所有凌乱的路径计算,并让您在应用代码之前查看它的外观。但是,在使用Inkscape时要小心,因为有时候它不会修改路径,只会向对象添加一个变换,而这对Raphael用户没有任何作用

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");