javascript - 拉斐尔图标大小

Question

我的网站上有几个 Raphael 图标，如下所示：

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

Answer 1

使用变换方法：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");

Answer 2

如果您有一个实际的 svg 文件可供使用，我建议的最简单方法是使用 Adob​​e Illustrator 或Inkscape等程序来修改图标的大小。完成后，只需提取路径信息，就会出现一个更大的图标。

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

Answer 3

编辑：好的，意识到你可能没有使用 .css() 来自的 jQuery。

我建议使用 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，那么只要 Rapheal .attr() 函数返回一个 DOM ELEMENT，你可以这样做：

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