Raphael을 사용하여 Circle 그리기

for(var i=0; i<10; i++) 
{ 
    paper = Raphael(0, 0, 500, 500); 
    var circle = paper.circle(50, i*50, width); 
}

출력화면

circle_1

여기서 circle에 click 및 mouse over event 연동 추가


    circle .click(function(this : any){
        this.attr({fill : '#0F0'});
    })

    circle.mouseover(function(this : any){  
        this.attr({fill : '#F00'});
    })

이때, 문제 발생

  1. Mouse Click 및 Over Event가 Random하게 인식되는 현상.
  2. 한번 전체적으로 Mouse Over를 통해 인식된 이후 부터는 정상 인식되는 현상

원인 ㅡㅡ;

최초 circle의 attribute가 없어서 line으로만 인식,,,…..ㅡㅡ;;;

최초 circle 생성시

attr({fill : '#000'})

추가 후 정상적으로 잘 작동 됨