라파엘 아이콘 크기

Question

나는이 같은 내 웹 사이트에 몇 라파엘 아이콘이 있습니다

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

가 어떻게 아이콘을 더 할 수 있습니까?

감사합니다.

메가바이트

Answer 1

편집 : 좋아, 당신은 아마 .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 요소가 반환됩니다.

0 http://raphaeljs.com/reference.html#Element.transform

예를 들어, 보통 크기의 150 % 만들기 위해 :

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

Answer 2

사용 방법은 변환

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 3

당신은, 가장 쉬운 방법으로 일할 수있는 실제적인 SVG 파일이있는 경우 I 아이콘의 크기를 수정하려면 Adobe Illustrator 또는 Inkscape과 같은 프로그램을 사용하는 것이 좋습니다. 이 작업이 끝나면 경로 정보를 추출하면 더 큰 아이콘이 나타납니다.

이 프로그램은 지저분한 경로 계산을 모두 수행하고 코드를 적용하기 전에 어떻게 보이는지 알려줍니다. 그러나 Inkscape를 사용할 때는 경로를 수정하지 않고 Raphael 사용자를 위해 아무것도 수행하지 않는 객체에 변형을 추가하기 때문에 조심하십시오.