이벤트시 새 스타일이 요소에 적용되지 않습니다.

Question

rahaeljs를 사용하여 일부 사각형을 동적으로 생성합니다. 이러한 사각형에는 이벤트 처리기가 있습니다.

function changeColor(obj) { 
     return function() { 
      obj.attr({cursor : 'pointer'}); 
     } 
    } 



    var main = function() { 

    var width = 901; 
    var height = 868; 
    var space = 50; 

    var paper = Raphael('paper', width, height); 


    for (var y = 0; y < height; y += space) { 
     for (var x = 0; x < width; x += space) { 
      var r = paper.rect(x, y, space, space); 
      r.attr({fill : 'transparent'}) 
      r.click(changeColor(r)); 


      } 
    } 

    }; 

    window.onload = main; 

내가 {커서 : '포인터'}로 커서를 설정 한 경우 : 나는 스타일을 조작 할 때, 그것이 내가 설정하려고)합니다 (ATTR에 따라 실패 내가하려고하면, 이것은 잘 작동 채우기 색상을 obj.attr ({fill : '# ff00ff'});로 변경하십시오. changeColor 함수에서 아무 일도 일어나지 않습니다. 콘솔에도 오류가 없습니다.

나는 최신 버전의 라파엘을 사용하고 있습니다.

제안 사항?

감사합니다, 마이클

Answer 1

당신은 매우 즐겁게 또는이 대답하여 매우 좌절이 될 것이다

가 ... 문제가 투명 채우기 특성과 관련이있다 . SVG는 완전히 투명한 객체를 클릭 할 수없는 객체로 취급하므로 클릭 이벤트가 그 아래의 레이어로 필터링됩니다. 따라서 직사각형에 클릭 이벤트가 발생하지 않습니다.

솔리드 색상으로 색상을 설정할 수없는 경우, 당신은 적어도 채우기 알파의 작은, 거의 눈에 띄지 양의 속성을 줄 수 :

r.attr({ fill: 'rgba(255,255,255,0.001)' }); 

, 다시 사업에서 수행되어야한다 !